/* ================================================================
   DXED — Full Gaming Social Platform Styles
   ================================================================ */

:root {
  /* ---- Spacing scale ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ---- Surfaces (charcoal black, but cards stay legible on phones) ---- */
  --bg-primary:       #050506;
  --bg-secondary:     #0b0c0f;
  --bg-card:          #15161c;
  --bg-card-hover:    #1d1f26;
  --bg-input:         rgba(255,255,255,0.04);
  --bg-widget:        #101117;
  --bg-elevated:      #1d1f26;

  /* ---- Brand / Accent (neutral graphite — monochrome identity) ---- */
  --accent:           #7a7e8c;
  --accent-2:         #686c79;
  --accent-subtle:    rgba(255,255,255,0.025);
  --accent-hover:     rgba(255,255,255,0.05);
  --accent-soft:      rgba(122,126,140,0.12);
  --accent-muted:     rgba(122,126,140,0.16);
  --accent-glow:      rgba(122,126,140,0.14);
  --accent-mid:       rgba(122,126,140,0.22);
  --accent-strong:    rgba(122,126,140,0.30);
  --accent-light:     #c3c6cf;

  /* ---- Semantic colors (status only — used sparingly) ---- */
  --accent-blue:      #7a7e8c;
  --accent-cyan:      #7a7e8c;
  --accent-green:     #4f9e6a;
  --accent-red:       #cf5a5e;
  --accent-orange:    #bd8a57;
  --accent-gold:      #b3993f;

  /* ---- Gaming accent (very subtle cool tint over charcoal — NOT a glowing purple) ---- */
  --game-accent:      #9aa4c0;
  --game-accent-2:    #a89ac0;
  --game-soft:        rgba(154,164,192,0.10);

  /* ---- Typography (neutral, no color tint) ---- */
  --text-primary:     #edeef1;
  --text-secondary:   #969aa6;
  --text-muted:       #5c606b;

  /* ---- Font-size scale ---- */
  --text-2xs:         10px;
  --text-xs:          11px;
  --text-sm:          12px;
  --text-base:        13px;
  --text-md:          14px;
  --text-lg:          16px;
  --text-xl:          18px;
  --text-2xl:         20px;
  --text-3xl:         24px;

  /* ---- Z-index layers ---- */
  --z-base:           1;
  --z-card:           10;
  --z-sticky:         100;
  --z-dropdown:       500;
  --z-overlay:        1000;
  --z-modal:          2000;
  --z-toast:          5000;
  --z-top:            9999;

  /* ---- Borders ---- */
  --border:           rgba(255,255,255,0.06);
  --border-strong:    rgba(255,255,255,0.10);
  --border-accent:    rgba(255,255,255,0.16);

  /* ---- Radius system ---- */
  --radius-xs:        6px;
  --radius-sm:        10px;
  --radius:           14px;
  --radius-md:        18px;
  --radius-lg:        22px;
  --radius-full:      999px;

  /* ---- Shadows ---- */
  --shadow-sm:        0 1px 2px rgba(0,0,0,0.25);
  --shadow-card:      0 1px 3px rgba(0,0,0,0.18);
  --shadow-glow:      none;
  --shadow-lift:      0 10px 30px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.05);

  /* ---- Layout ---- */
  --sidebar-w:        256px;
  --right-w:          300px;

  /* ---- Motion ---- */
  --ease:             cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition:       0.18s var(--ease);
  --transition-fast:  0.12s var(--ease);

  /* ---- Component tokens ---- */
  --btn-height:       36px;
  --btn-height-sm:    30px;
  --btn-radius:       var(--radius-sm);
  --input-height:     38px;
  --input-radius:     var(--radius-sm);
  --card-radius:      var(--radius);
  --card-padding:     var(--sp-5);
  --avatar-sm:        32px;
  --avatar-md:        38px;
  --avatar-lg:        48px;
}

/* ---- Light theme: core palette tokens (components inherit from these) ---- */
[data-theme="light"] {
  --bg-primary:       #f7f7fa;
  --bg-secondary:     #f0f0f5;
  --bg-card:          #ffffff;
  --bg-card-hover:    #f5f5fa;
  --bg-input:         #f0f0f5;
  --bg-widget:        #ffffff;
  --bg-elevated:      #ffffff;
  --text-primary:     #0a0a0f;
  --text-secondary:   #6b6b76;
  --text-muted:       #9a9aa3;
  --border:           #e6e6eb;
  --border-accent:    rgba(122,126,140,0.18);
  --shadow-sm:        0 1px 2px rgba(0,0,0,0.05);
  --shadow-card:      0 1px 3px rgba(0,0,0,0.06);
  --shadow-glow:      none;
  --shadow-lift:      0 8px 24px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* clip (not hidden) prevents horizontal scroll WITHOUT turning the root into a
     scroll container — hidden forces overflow-y to auto, which breaks position:sticky
     (the left nav would ride along with the page instead of staying put). */
  overflow-x: clip;
  width: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 14px;
  min-height: 100vh;
  overflow-x: clip;
  width: 100%;
  max-width: 100vw;
}

/* iOS PWA standalone mode safe area handling */
@media all and (display-mode: standalone) {
  body {
    padding-top: env(safe-area-inset-top, 0px);
  }
  /* Fullscreen overlays should ignore body padding and handle their own */
  .takes-viewer-overlay,
  .story-viewer-overlay,
  .vp-overlay,
  .img-lightbox {
    padding-top: 0;
  }
  /* Modal overlays need safe area padding */
  .modal-overlay {
    padding-top: max(20px, env(safe-area-inset-top, 0px));
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
  }
}

/* Scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 99px; }

/* ================================================================
   LAYOUT
   ================================================================ */
#app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--right-w);
  gap: 28px;
  min-height: 100vh;
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 28px;
}

#main-content {
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  min-height: 100vh;
  background: var(--bg-secondary);
}

/* ---- Per-section cinematic backdrops ----
   Each section has its own art (Home / Party / Clips / Communities / Crypto
   Games / DXED+). Fixed behind the app at z-index:-1; the active section's
   layer fades in. Dark mode only — hidden over the light UI. */
.sec-photo-bg {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: var(--bg-primary);
  opacity: 0; transition: opacity .5s ease;
}
.sec-photo-bg img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center;
  opacity: 0.5;
  filter: blur(12px);
  transform: scale(1.12);   /* hide the soft edges the blur creates */
}
/* charcoal wash so the feed/content stays readable over the busy art */
.sec-photo-bg::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(5,5,6,0.42), rgba(5,5,6,0.64));
}
/* Home: much darker + a heavy vignette so the edges fall off into shadow */
.home-photo-bg img { opacity: 0.26; }
.home-photo-bg::after {
  background:
    radial-gradient(110% 85% at 50% 42%, transparent 0%, transparent 26%, rgba(3,3,5,0.9) 100%),
    linear-gradient(to bottom, rgba(3,3,5,0.6), rgba(3,3,5,0.82));
}
/* activate the matching layer per section */
body[data-section="home"]         .home-photo-bg,
body[data-section="lfg"]          .party-photo-bg,
body[data-section="clips"]        .clips-photo-bg,
body[data-section="communities"]  .communities-photo-bg,
body[data-section="crypto-games"] .crypto-photo-bg,
body[data-section="plans"]        .plans-photo-bg { opacity: 1; }
/* let the art whisper through the columns on these sections */
body[data-section="home"] #main-content,
body[data-section="lfg"] #main-content,
body[data-section="clips"] #main-content,
body[data-section="communities"] #main-content,
body[data-section="crypto-games"] #main-content,
body[data-section="plans"] #main-content {
  background: color-mix(in srgb, var(--bg-secondary) 80%, transparent);
}
body[data-section="home"] #sidebar,        body[data-section="home"] #right-sidebar,
body[data-section="lfg"] #sidebar,
body[data-section="clips"] #sidebar,        body[data-section="clips"] #right-sidebar,
body[data-section="communities"] #sidebar,  body[data-section="communities"] #right-sidebar,
body[data-section="crypto-games"] #sidebar, body[data-section="crypto-games"] #right-sidebar,
body[data-section="plans"] #sidebar,        body[data-section="plans"] #right-sidebar { background: transparent; }
/* Light mode: no dark cinematic art over the light UI — hide it, restore solids */
[data-theme="light"] .sec-photo-bg { display: none; }
[data-theme="light"] body[data-section="home"] #main-content,
[data-theme="light"] body[data-section="lfg"] #main-content,
[data-theme="light"] body[data-section="clips"] #main-content,
[data-theme="light"] body[data-section="communities"] #main-content,
[data-theme="light"] body[data-section="crypto-games"] #main-content,
[data-theme="light"] body[data-section="plans"] #main-content { background: var(--bg-secondary); }

/* ================================================================
   LEFT SIDEBAR
   ================================================================ */
#sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}
#sidebar::-webkit-scrollbar { width: 4px; }
#sidebar::-webkit-scrollbar-track { background: transparent; }
#sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: var(--radius-xs); }
#sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

.sidebar-logo {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  padding: 10px 14px 18px;
  cursor: pointer;
  user-select: none;
}
/* Standalone DXED mark — clean, no heavy container */
.logo-img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  color: #fff;
  display: block;
  transition: transform .25s cubic-bezier(.22,.68,.26,1), filter .3s ease;
}
/* Soft glow on the mark itself */
.sidebar-logo:hover .logo-img {
  transform: scale(1.05);
  filter: drop-shadow(0 2px 12px var(--accent-glow));
}
.sidebar-logo:active .logo-img { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  .logo-img { transition: filter .3s ease; transform: none !important; }
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
  padding-right: 2px;
}
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: var(--radius-xs); }
.nav-group-label:first-child { margin-top: 0; }

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--transition);
  position: relative;
  border: 1px solid transparent;
}
.nav-item-secondary {
  font-size: 13px;
  padding: 6px var(--sp-3);
  color: var(--text-muted);
}
.nav-item-secondary svg {
  width: 18px;
  height: 18px;
  opacity: 0.7;
}
.nav-group-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: var(--sp-2) var(--sp-3) var(--sp-1);
  margin-top: var(--sp-1);
}
/* Collapsible nav group (e.g. Gaming) */
.nav-group { margin: 2px 0; }
.nav-group > summary {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  list-style: none;
  user-select: none;
  border: 1px solid transparent;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary:hover { background: var(--accent-subtle); color: var(--text-primary); }
.nav-group > summary > svg:first-child {
  width: 19px; height: 19px; flex-shrink: 0;
  stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.nav-group-chevron {
  width: 16px; height: 16px; margin-left: auto; flex-shrink: 0;
  stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--transition);
}
.nav-group[open] > summary .nav-group-chevron { transform: rotate(180deg); }
.nav-group[open] > summary { color: var(--text-primary); }
.nav-group-items { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; padding-left: var(--sp-3); }
.nav-item:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text-primary);
}
.nav-item:active {
  transform: scale(0.98);
}
.nav-item.active {
  background: var(--accent-subtle);
  color: var(--text-primary);
  border-color: transparent;
  font-weight: 600;
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}
.nav-item svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: all 0.18s ease;
}
.nav-item.active svg {
  stroke: var(--accent);
  stroke-width: 2.1;
}
.nav-badge {
  margin-left: auto;
  background: var(--accent);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  min-width: 18px;
  text-align: center;
}
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 6px rgba(244,63,94,0.25); }
  50% { box-shadow: 0 0 12px rgba(244,63,94,0.45); }
}
.notif-badge { background: var(--accent); }
/* Secondary payment options live behind a collapsed disclosure — regular
   card payment is always presented first. */
.cap-alt-pay { margin-top: 14px; text-align: left; }
.cap-alt-pay > summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 0;
  list-style: none;
}
.cap-alt-pay > summary::before { content: "▸ "; }
.cap-alt-pay[open] > summary::before { content: "▾ "; }

/* "Dot only" badge mode: a small presence dot instead of a number. */
.badge-dot {
  min-width: 0;
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
}

.sidebar-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 6px 14px;
}

.btn-post {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  background: var(--text-primary);
  color: var(--bg-primary);
  border: none;
  border-radius: var(--radius-full);
  padding: 13px var(--sp-5);
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  margin: var(--sp-4) 0 var(--sp-3);
  transition: opacity 0.15s ease, transform 0.12s ease;
  letter-spacing: -0.01em;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,0.7);
}
.btn-post:hover { opacity: 0.92; }
.btn-post:active { transform: scale(0.98); }
.btn-post svg { width: 18px; height: 18px; stroke: var(--bg-primary); fill: none; stroke-width: 2.6; stroke-linecap: round; }

.sidebar-user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  border: 1px solid transparent;
  margin-top: auto;
  background: rgba(255,255,255,0.02);
}
.sidebar-user-card:hover { background: var(--accent-subtle); border-color: var(--border-accent); }
.user-avatar-sm {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; color: white;
  flex-shrink: 0;
}
.user-info-sm { flex: 1; min-width: 0; }
.user-name-sm { display: block; font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-tag-sm { display: block; font-size: 11px; color: var(--text-muted); }
.user-online-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-green);
  flex-shrink: 0;
}

/* ================================================================
   SECTION LAYOUT
   ================================================================ */
.section { display: none; }
.section.active { display: block; }

/* Feed tabs (For You / Following / Hot) ease their active/hover state in the
   default theme too — not just the light/running-green layers. */
.feed-tab { transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast); }
/* Keyboard-visible focus ring across every interactive control (most set
   outline:none with no replacement). Mouse clicks stay ring-free. */
:where(input, textarea, select, button, a[href], [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.section-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg-secondary) 82%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.section-header h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.section-head-titles { min-width: 0; }
.section-sub { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin-top: 3px; max-width: 560px; }
@media (max-width: 560px) { .section-sub { display: none; } }
.section-header-top { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.mobile-menu-btn { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary); cursor: pointer; border-radius: 50%; transition: all var(--transition-fast); -webkit-tap-highlight-color: transparent; }
.mobile-menu-btn:hover, .mobile-menu-btn:active { background: var(--bg-card-hover); color: var(--text-primary); }
.mobile-header-actions { display: flex; align-items: center; gap: 8px; }
.mobile-header-bell { display: none; position: relative; align-items: center; justify-content: center; width: 38px; height: 38px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary); cursor: pointer; border-radius: 50%; transition: all var(--transition-fast); -webkit-tap-highlight-color: transparent; }
.mobile-header-bell:hover, .mobile-header-bell:active { background: var(--bg-card-hover); color: var(--text-primary); }
.mobile-bell-badge { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; border-radius: 9px; background: #f0455f; color: #fff; font-size: 10px; font-weight: 800; line-height: 17px; text-align: center; border: 2px solid var(--bg-secondary); }
.mobile-more-item { position: relative; }
.mobile-more-badge { position: absolute; top: 7px; right: 7px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; background: #f0455f; color: #fff; font-size: 9px; font-weight: 800; line-height: 16px; text-align: center; }

/* ---- Unified tab system ---- */
.header-tabs { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.tab-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  padding: 7px var(--sp-4);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}
.tab-btn:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.tab-btn:active { transform: scale(0.96); }
.tab-btn.active {
  background: var(--accent-soft);
  color: var(--text-primary);
  border-color: var(--accent-mid);
}

/* ================================================================
   STORIES
   ================================================================ */
/* ── Story Bubbles ── */
.stories-container {
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  overflow: hidden;
}
.stories-scroll {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.stories-scroll::-webkit-scrollbar { display: none; }
.story-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  flex-shrink: 0;
  width: 44px;
}
.story-item:hover .story-ring { transform: scale(1.06); }
/* Ring wrapper — provides the gradient border effect */
.story-ring {
  width: 44px; height: 44px;
  border-radius: 50%;
  padding: 2px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s ease;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  background-size: 300% 300%;
  animation: none;
}
.story-ring.watched {
  background: var(--text-muted);
  animation: none;
}
.story-ring.own {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  background-size: 200% 200%;
  animation: none;
}
@keyframes storyRingPulse {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* Inner avatar circle */
.story-avatar-inner {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--bg-card);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; color: #fff;
  overflow: hidden;
  box-sizing: border-box;
  border: 2px solid var(--bg-card);
}
.add-avatar {
  background: var(--bg-secondary) !important;
  font-size: 18px;
  color: var(--accent);
}
.story-item span {
  font-size: 9px;
  color: var(--text-muted);
  opacity: 0.6;
  white-space: nowrap;
  max-width: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/* ================================================================
   COMPOSE BOX
   ================================================================ */
.compose-box {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-card);
  border-radius: var(--radius-md);
  margin: var(--sp-4) var(--sp-4) var(--sp-2);
  border: 1px solid var(--border);
  transition: border-color var(--transition), background var(--transition);
}
.compose-box:focus-within {
  border-color: var(--border-strong);
  background: var(--bg-card);
}
.compose-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: white;
  flex-shrink: 0;
}
.compose-right { flex: 1; min-width: 0; }
.compose-right textarea, .compose-area textarea {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  resize: none;
  color: var(--text-primary);
  font-size: 15px;
  font-family: inherit;
  min-height: 48px;
  padding: 12px 14px;
  line-height: 1.5;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.compose-right textarea:focus, .compose-area textarea:focus {
  border-color: var(--accent);
  background: var(--bg-card);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}
.compose-right textarea::placeholder { color: var(--text-muted); }
/* Smooth reveal when the inline composer opens on mobile */
@keyframes composeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.compose-box.m-open { animation: composeIn 0.2s var(--ease); }
.compose-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  margin-top: var(--sp-3);
}
/* Toolbar icon row */
.compose-toolbar-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  padding: 0;
}
/* Toolbar icon buttons */
.toolbar-icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-muted);
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.toolbar-icon-btn:hover {
  background: var(--accent-subtle);
  color: var(--accent);
}
.toolbar-icon-btn:active {
  transform: scale(0.88);
}
.toolbar-icon-btn svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Unified "Upload Media" button (replaces separate Photo/Video buttons) */
.toolbar-media-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  background: var(--accent-subtle);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-full);
  cursor: pointer;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.toolbar-media-btn:hover { background: var(--accent-soft); border-color: var(--accent-mid); }
.toolbar-media-btn:active { transform: scale(0.96); }
.toolbar-media-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Tag Players autocomplete popover */
.tag-players-pop {
  width: 288px; max-width: calc(100vw - 16px);
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lift);
  z-index: var(--z-modal); overflow: hidden;
  animation: tagPopIn .14s var(--ease);
}
@keyframes tagPopIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.tag-players-search {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text-muted);
}
.tag-players-search input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text-primary); font-size: 13px; font-family: inherit;
}
.tag-players-search input::placeholder { color: var(--text-muted); }
.tag-players-results { max-height: 264px; overflow-y: auto; padding: 4px; }
.tag-players-hint { padding: 16px 12px; text-align: center; font-size: 12px; color: var(--text-muted); }
.tag-player-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 8px; background: none; border: none; border-radius: var(--radius-sm);
  cursor: pointer; text-align: left; transition: background var(--transition-fast);
}
.tag-player-row:hover { background: var(--accent-subtle); }
.tag-player-av {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; color: #fff;
}
.tag-player-meta { display: flex; flex-direction: column; min-width: 0; }
.tag-player-name {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  display: flex; align-items: center; gap: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tag-player-handle { font-size: 11px; color: var(--text-muted); }

/* Inline @mention autocomplete popup */
.mention-pop {
  position: fixed; max-width: calc(100vw - 16px);
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lift);
  z-index: var(--z-modal); overflow: hidden; padding: 4px;
  animation: tagPopIn .14s var(--ease);
}
.mention-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 8px; background: none; border: none; border-radius: var(--radius-sm);
  cursor: pointer; text-align: left; transition: background var(--transition-fast);
}
.mention-row:hover, .mention-row.active { background: var(--accent-subtle); }
.mention-av {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; color: #fff;
}
.mention-meta { display: flex; flex-direction: column; min-width: 0; }
.mention-name {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  display: flex; align-items: center; gap: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mention-handle { font-size: 11px; color: var(--text-muted); }

/* Toolbar separator */
.toolbar-separator {
  display: none;
}
/* Toolbar tooltip */
.toolbar-icon-btn[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.85);
  color: rgba(255,255,255,0.9);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  white-space: nowrap;
  pointer-events: none;
  z-index: var(--z-sticky);
}
.toolbar-icon-btn[data-tooltip]:hover::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: rgba(0,0,0,0.85);
  pointer-events: none;
  z-index: var(--z-sticky);
}
/* Compose cancel button */
.compose-cancel-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  color: rgba(255,255,255,0.45);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.compose-cancel-btn:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.7);
}
/* Compose post button */
.compose-post-btn-new {
  background: var(--accent);
  border: none;
  border-radius: var(--radius-full);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 20px;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.compose-post-btn-new:hover {
  background: var(--accent-2);
  transform: translateY(-1px);
}
.compose-post-btn-new:active {
  transform: scale(0.96);
}
.compose-post-btn-new:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* ================================================================
   HOME DASHBOARD — featured strip
   ================================================================ */
.home-featured { padding: var(--sp-4) var(--sp-5) 0; }
.home-featured:empty { display: none; }
.hf-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.hf-title { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); display: flex; align-items: baseline; gap: 10px; }
.hf-sub { font-size: 12px; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.hf-arrows { display: flex; gap: 6px; }
.hf-arrow { width: 30px; height: 30px; border-radius: 50%; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); }
.hf-arrow:hover { background: var(--bg-card-hover); color: var(--text-primary); border-color: var(--border-accent); }
.hf-track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
.hf-track::-webkit-scrollbar { display: none; }
.hf-card { flex: 0 0 200px; scroll-snap-align: start; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; cursor: pointer; text-align: left; padding: 0; transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); }
.hf-card:hover { transform: translateY(-3px); border-color: var(--border-accent); box-shadow: var(--shadow-lift); }
.hf-card-art { position: relative; height: 116px; background-size: cover !important; background-position: center !important; display: flex; align-items: center; justify-content: center; }
.hf-card-initials { font-size: 30px; font-weight: 900; letter-spacing: 1px; color: rgba(255,255,255,0.92); text-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.hf-card-tag { position: absolute; top: 10px; left: 10px; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #fff; background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius-full); padding: 3px 9px; backdrop-filter: blur(6px); }
.hf-card-info { padding: 11px 13px 13px; }
.hf-card-name { font-size: 14px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; }
.hf-card-players { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); margin-top: 3px; }

/* Right panel — Latest Update card */
.widget-update { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; transition: border-color var(--transition), box-shadow var(--transition); }
.widget-update:hover { border-color: var(--border-accent); box-shadow: var(--shadow-lift); }
.wu-banner { height: 64px; display: flex; align-items: center; padding: 0 18px; background:
    radial-gradient(120% 160% at 0% 0%, rgba(150,154,168,0.30), transparent 55%),
    linear-gradient(135deg, #20222b, #14151a 75%); }
.wu-mark { font-weight: 900; letter-spacing: 3px; font-size: 18px; color: #fff; }
.wu-body { padding: 13px 16px 16px; }
.wu-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.wu-ver { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 700; color: var(--accent-light); background: var(--accent-soft); border-radius: 6px; padding: 2px 7px; }
.wu-status { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #f59e0b; background: rgba(245,158,11,0.14); border: 1px solid rgba(245,158,11,0.3); border-radius: var(--radius-full); padding: 3px 9px; }
.wu-title { font-size: 15px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.01em; margin-bottom: 5px; }
.wu-sum { font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); margin-bottom: 12px; }
.wu-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--text-primary); background: var(--bg-card-hover); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 7px 14px; cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast); }
.wu-btn:hover { background: var(--accent); color: #fff; border-color: transparent; }

@media (max-width: 560px) {
  .home-featured { padding: 12px 12px 0; }
  .hf-arrows { display: none; }
  .hf-card { flex-basis: 168px; }
  .hf-card-art { height: 100px; }
}

/* ================================================================
   FEED POSTS
   ================================================================ */
.feed-container { padding: 0; }
.comm-feed, .cg-feed, .clan-feed, #bookmarks-feed { padding: 0; }

/* ── Party strip on Home (compact horizontal scroller) ── */
.home-parties { padding: 12px 0 12px; border-bottom: 1px solid var(--border); }
.home-parties:empty { display: none; }
.home-parties-head { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp-5) 10px; }
.home-parties-title { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }
.home-parties-all { background: none; border: none; color: var(--text-muted); font-size: 12px; font-weight: 600; cursor: pointer; }
.home-parties-all:hover { color: var(--text-primary); }
.home-parties-scroll { display: flex; gap: 9px; overflow-x: auto; padding: 0 var(--sp-5) 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.home-parties-scroll::-webkit-scrollbar { display: none; }
.home-party-card { flex: 0 0 auto; scroll-snap-align: start; background: var(--bg-card); border: 1px solid var(--border); border-radius: 13px; padding: 11px 12px; cursor: pointer; transition: border-color 0.2s, background 0.2s, transform 0.14s; }
.home-party-card:hover { border-color: var(--border-accent); background: var(--bg-card-hover); }
.home-party-card:active { transform: scale(0.98); }
.home-party-avatar { width: 30px; height: 30px; font-size: 12px; margin-bottom: 7px; }
.home-party-game { font-size: 13px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.home-party-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-party-suggest { width: 172px; display: flex; flex-direction: column; }
.home-party-suggest-game { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.home-party-suggest-purpose { font-size: 14px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.01em; margin-bottom: 3px; }
.home-party-suggest-desc { font-size: 11.5px; color: var(--text-secondary); line-height: 1.4; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home-party-btn { margin-top: 10px; width: 100%; background: var(--text-primary); color: var(--bg-primary); border: none; border-radius: var(--radius-full); padding: 7px 0; font-size: 11.5px; font-weight: 800; cursor: pointer; transition: opacity 0.15s; }
.home-party-btn:hover { opacity: 0.9; }

/* Right-sidebar follow rows (Who to follow / Crypto Creators) */
.follow-list { display: flex; flex-direction: column; }
.follow-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; transition: background 0.15s; }
.follow-row:hover { background: rgba(255,255,255,0.025); }
.follow-row-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: #fff; }
.follow-row-info { flex: 1; min-width: 0; }
.follow-row-name { font-size: 13.5px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; display: flex; align-items: center; gap: 5px; }
/* Ellipsis needs its own shrinkable element — it doesn't apply to raw text inside a flex container. */
.follow-row-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.follow-row-handle { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.follow-row-btn { flex-shrink: 0; background: var(--text-primary); color: var(--bg-primary); border: none; border-radius: var(--radius-full); padding: 6px 14px; font-size: 12px; font-weight: 800; cursor: pointer; transition: background var(--transition), color var(--transition), opacity var(--transition-fast); }
.follow-row-btn:hover { opacity: 0.9; }

/* Solana community tag (purple — intentional Solana-brand exception) */
.solana-tag {
  display: inline-flex; align-items: center; vertical-align: middle;
  font-size: 9px; font-weight: 800; letter-spacing: 0.06em;
  color: #c9a6ff; background: rgba(153,69,255,0.16); border: 1px solid rgba(153,69,255,0.4);
  border-radius: var(--radius-full); padding: 1px 7px;
}

/* Right-sidebar / inline action cards (replace dead empty states) */
.widget-action { padding: 14px; }
.widget-action-text { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 12px; }
.widget-action-btn { width: 100%; background: var(--text-primary); color: var(--bg-primary); border: none; border-radius: var(--radius-full); padding: 9px 0; font-size: 12.5px; font-weight: 800; cursor: pointer; transition: opacity 0.15s, transform 0.12s; }
.widget-action-btn:hover { opacity: 0.92; }
.widget-action-btn:active { transform: scale(0.98); }

/* ── Official DXED prompt cards (keep the feed alive) ── */
.dxed-prompt-card {
  padding: 16px var(--sp-5);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.18s var(--ease);
}
.dxed-prompt-card:hover { background: rgba(255,255,255,0.018); }
.dxed-prompt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dxed-prompt-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--bg-elevated); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.dxed-prompt-avatar img { width: 19px; height: 19px; object-fit: contain; }
.dxed-prompt-name { font-weight: 800; font-size: 13.5px; color: var(--text-primary); letter-spacing: 0.02em; }
.dxed-prompt-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); background: rgba(255,255,255,0.04); border: 1px solid var(--border); padding: 1px 7px; border-radius: var(--radius-full); }
.dxed-prompt-x { margin-left: auto; background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 3px; border-radius: 6px; display: flex; transition: color 0.15s, background 0.15s; }
.dxed-prompt-x:hover { color: var(--text-primary); background: rgba(255,255,255,0.05); }
.dxed-prompt-text { font-size: 15.5px; font-weight: 700; color: var(--text-primary); line-height: 1.4; letter-spacing: -0.01em; margin-bottom: 12px; }
.dxed-prompt-cta { display: inline-flex; align-items: center; gap: 7px; background: var(--text-primary); color: var(--bg-primary); border: none; border-radius: var(--radius-full); padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer; transition: opacity 0.15s, transform 0.12s; }
.dxed-prompt-cta:hover { opacity: 0.9; }
.dxed-prompt-cta:active { transform: scale(0.97); }

.dxed-feed-welcome { padding: 32px var(--sp-5) 26px; border-bottom: 1px solid var(--border); }
.dxed-feed-welcome-kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }
.dxed-feed-welcome-title { font-size: 26px; font-weight: 900; letter-spacing: -0.02em; color: var(--text-primary); margin: 0 0 8px; }
.dxed-feed-welcome-sub { font-size: 14px; color: var(--text-secondary); line-height: 1.55; margin: 0 0 18px; max-width: 440px; }
.dxed-feed-welcome-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Flat timeline — posts separated by a hairline, not boxed cards */
.post-card {
  padding: var(--sp-4) var(--sp-5);
  background: transparent;
  border-radius: 0;
  margin: 0;
  border: none;
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
  cursor: pointer;
  position: relative;
}
.post-card:hover {
  background: rgba(255,255,255,0.018);
}
.post-boost-header {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 11px; font-weight: 500; color: var(--text-muted);
  margin-bottom: var(--sp-1); padding-left: 0;
  cursor: pointer;
}
.post-boost-header svg { opacity: 0.6; }
.post-boost-header:hover { color: var(--accent); }
.post-boost-header:hover svg { opacity: 1; }

.post-header {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: 10px;
}
.post-avatar {
  width: var(--avatar-md); height: var(--avatar-md);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-blue));
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: white;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform var(--transition-fast);
}
.post-avatar:hover { transform: scale(1.05); }
/* Larger avatar in the feed header for clearer hierarchy */
.post-header > .post-avatar { width: 44px; height: 44px; font-size: 16px; }

.post-user-info { flex: 1; min-width: 0; padding-top: 1px; }
/* Single clean top row: name · verified · @handle · time …… ⋯  (never wraps) */
.post-user-row { display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; line-height: 1.2; min-width: 0; }
.post-username {
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: color var(--transition-fast);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
  max-width: 100%;
}
.post-username:hover { color: var(--accent); }
/* verified badge stays prominent and never shrinks */
.post-user-row > svg, .post-user-row .vbadge { flex-shrink: 0; }
.post-handle { color: var(--text-muted); font-size: 13px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 2; min-width: 0; }
.post-dot-time { color: var(--text-muted); font-size: 13px; white-space: nowrap; flex-shrink: 0; }
.post-tag { color: var(--text-muted); font-size: 13px; letter-spacing: -0.01em; }
.post-sub-row { display: flex; align-items: center; gap: var(--sp-2); margin-top: 5px; flex-wrap: wrap; row-gap: 5px; }
.post-time { color: var(--text-muted); font-size: 13px; margin-left: auto; padding-top: 1px; white-space: nowrap; }

/* Secondary metadata row: Valorant · Clip · Community (muted, wraps only if needed) */
.post-meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 3px; font-size: 12px; color: var(--text-muted); line-height: 1.3; }
.post-meta-sep { color: var(--text-muted); opacity: .45; }
.post-meta-link { color: var(--text-secondary); cursor: pointer; font-weight: 500; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-meta-link:hover { color: var(--accent); }
.post-meta-plain { color: var(--text-muted); }
.post-meta-chip { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; color: var(--text-muted); }
.post-meta-chip.meta-clip { color: var(--accent-red); }
.post-meta-chip.meta-crypto { color: #c4b5fd; background: rgba(139,92,246,.14); border: 1px solid rgba(139,92,246,.34); padding: 1px 8px; border-radius: 999px; cursor: pointer; font-size: 11px; letter-spacing: .2px; }
.post-meta-chip.meta-crypto:hover { background: rgba(139,92,246,.22); color: #ddd0ff; }
.post-meta-chip svg { opacity: .9; }

/* 3-dot post options menu (delete lives inside) */
.post-menu-wrap { position: relative; display: inline-flex; margin-left: auto; flex-shrink: 0; }
.post-menu-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px; border-radius: var(--radius-xs); display: flex; align-items: center; justify-content: center; transition: color .15s, background .15s; opacity: .65; }
.post-card:hover .post-menu-btn { opacity: 1; }
.post-menu-btn:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); }
.share-dropdown.post-menu-dropdown { top: calc(100% + 4px); bottom: auto; left: auto; right: 0; transform: none; min-width: 150px; }

.post-game-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  background: var(--accent-soft);
  color: var(--accent);
  border: none;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  padding: 2px var(--sp-2);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.post-game-tag:hover { background: var(--accent-mid); }

.post-delete-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  transition: all 0.15s ease;
  margin-left: auto;
  opacity: 0;
}
.post-card:hover .post-delete-btn { opacity: 1; }
.post-delete-btn:hover { color: var(--accent-red); background: rgba(239,68,68,0.08); }

/* Pinned post styles */
.post-pin-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-xs);
  opacity: 0;
  transition: opacity .15s, color .15s, background .15s;
  display: flex;
  align-items: center;
}
.post-card:hover .post-pin-btn { opacity: 1; }
.post-pin-btn:hover { color: var(--accent); background: var(--accent-hover); }
.post-pin-btn.pinned { color: var(--accent); opacity: 1; }

.post-pinned-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}
.post-pinned-header svg { flex-shrink: 0; }

.post-pinned {
  border-color: var(--accent-mid);
}

/* Admin pin button */
.adm-btn-active {
  background: var(--accent-muted);
  border-color: var(--accent-strong);
  color: var(--accent-light);
}

.post-type-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  opacity: 0.6;
}
.type-clip { background: rgba(239,68,68,0.08); color: var(--accent-red); border: 1px solid rgba(239,68,68,0.08); }
.type-achievement { background: rgba(245,158,11,0.08); color: var(--accent-gold); border: 1px solid rgba(245,158,11,0.08); }
.type-lfg { background: rgba(34,197,94,0.08); color: var(--accent-green); border: 1px solid rgba(34,197,94,0.08); }
.type-post { display: none; }

.post-platform-badge {
  font-size: 10px;
  color: var(--text-muted);
  padding: 2px 6px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 5px;
  opacity: 0.8;
}

.post-body { font-size: 15px; line-height: 1.55; margin-bottom: 0; word-break: break-word; white-space: pre-wrap; color: rgba(240,240,250,0.92); letter-spacing: 0.005em; }
.post-body .hashtag { color: var(--accent); cursor: pointer; font-weight: 500; }
.post-body .hashtag:hover { text-decoration: underline; }
.post-body .mention { color: var(--accent-blue); cursor: pointer; font-weight: 500; }
.post-body .mention:hover { text-decoration: underline; }

.post-image {
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  transition: border-color 0.2s ease;
}
.post-image:hover { border-color: rgba(255,255,255,0.14); }
.post-image img { width: 100%; max-height: 320px; object-fit: cover; transition: transform 0.3s ease; }
.post-image:hover img { transform: scale(1.01); }

.post-clip-preview {
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  padding: 14px 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.2s ease;
}
.post-clip-preview:hover { border-color: rgba(239,68,68,0.3); box-shadow: 0 4px 16px rgba(239,68,68,0.06); }
.clip-icon {
  width: 42px; height: 42px; border-radius: var(--radius-sm);
  background: rgba(239,68,68,0.1); display: flex; align-items: center; justify-content: center;
  color: var(--accent-red); flex-shrink: 0;
}
.clip-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.clip-info { flex: 1; }
.clip-title { font-weight: 700; font-size: 13px; letter-spacing: -0.01em; }
.clip-desc { font-size: 12px; color: var(--text-muted); margin-top: 3px; line-height: 1.4; }
.clip-play-btn {
  background: var(--accent-red);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.clip-play-btn:hover { opacity: 0.85; }

.post-achievement {
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(245,158,11,0.06), rgba(239,68,68,0.03));
  border: 1px solid rgba(245,158,11,0.12);
  padding: 14px 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: border-color 0.15s ease;
}
.post-achievement:hover { border-color: rgba(245,158,11,0.3); }
.achievement-icon {
  width: 42px; height: 42px; border-radius: var(--radius-sm);
  background: rgba(245,158,11,0.1); display: flex; align-items: center; justify-content: center;
  color: var(--accent-gold); flex-shrink: 0;
}
.achievement-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.achievement-info .ach-title { font-weight: 700; font-size: 14px; color: var(--accent-gold); letter-spacing: -0.01em; }
.achievement-info .ach-game { font-size: 12px; color: var(--text-muted); margin-top: 3px; }

.post-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-top: var(--sp-3);
  margin-left: -8px;
}
.post-action-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  padding: 9px var(--sp-3);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition);
  flex: 1;
  justify-content: center;
  font-weight: 500;
}
.post-action-btn:active { transform: scale(0.9); }
.post-action-btn:active svg { transform: scale(0.85); }
/* Like button hover → soft rose */
.post-action-btn[data-action="like"]:hover { background: rgba(244,63,94,0.08); color: #f06280; }
.post-action-btn[data-action="like"]:hover svg { stroke: #f06280; }
/* Reply button hover → muted purple */
.post-action-btn[data-action="reply"]:hover { background: var(--accent-hover); color: var(--accent-light); }
.post-action-btn[data-action="reply"]:hover svg { stroke: var(--accent-light); }
/* Repost/boost button hover */
.post-action-btn[data-action="repost"]:hover,
.post-action-btn[data-action="boost"]:hover { background: var(--accent-hover); color: var(--accent-light); }
.post-action-btn[data-action="repost"]:hover svg,
.post-action-btn[data-action="boost"]:hover svg { stroke: var(--accent-light); }
/* Views → dim grey, no hover effect, de-emphasized */
.post-action-btn[data-action="views"] { color: rgba(255,255,255,0.22); cursor: default; font-size: 11px; flex: 0.6; }
/* Bookmark → de-emphasized */
.post-action-btn.bookmark-btn { flex: 0.5; }
/* Fallback hover */
.post-action-btn:hover { background: var(--accent-hover); color: rgba(183,148,246,0.9); }
.post-action-btn:hover svg { stroke: rgba(183,148,246,0.9); }
/* Active states */
.post-action-btn.liked { color: #f06280; font-weight: 600; }
.post-action-btn.liked:hover { background: rgba(244,63,94,0.08); color: #f06280; }
.post-action-btn.liked:hover svg { stroke: #f06280; }
.post-action-btn.liked svg path { fill: #f06280; stroke: #f06280; }
.post-action-btn.reposted { color: var(--accent-light); font-weight: 600; }
.post-action-btn.reposted:hover { background: var(--accent-hover); }
.post-action-btn.boosted { color: var(--accent-light); font-weight: 600; }
.post-action-btn.boosted:hover { background: var(--accent-hover); color: var(--accent-light); }
.post-action-btn.boosted svg path { stroke: var(--accent-light); }
.post-action-btn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: all 0.18s ease; }
.post-action-btn[data-action="views"] svg { width: 18px; height: 18px; }
.post-action-btn.bookmark-btn svg { width: 18px; height: 18px; }
.post-action-btn.active { color: var(--accent); }
.post-action-btn.active svg { stroke: var(--accent); fill: var(--accent); }

/* Reactions */
.reactions-bar {
  display: flex;
  gap: var(--sp-1);
  margin: 8px 0;
  flex-wrap: wrap;
}
.reaction-pill {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: var(--sp-1) var(--sp-3);
  font-size: 12px;
  cursor: pointer;
  transition: all var(--transition);
}
.reaction-pill:hover { border-color: var(--accent-mid); background: var(--accent-soft); }
.reaction-pill:active { transform: scale(0.95); }
.reaction-pill.active { border-color: var(--accent-mid); background: var(--accent-soft); color: var(--accent); }
.reaction-emoji { font-size: 14px; }

/* ================================================================
   EXPLORE
   ================================================================ */
.search-bar-big {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--input-radius);
  padding: var(--sp-3) var(--sp-4);
  flex: 1;
  max-width: 420px;
  transition: all 0.2s ease;
}
.search-bar-big:focus-within { border-color: rgba(122,126,140,0.35); background: rgba(255,255,255,0.045); box-shadow: 0 0 12px var(--accent-subtle); }
.search-bar-big svg { width: 16px; height: 16px; stroke: var(--text-muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.search-bar-big input { background: transparent; border: none; outline: none; color: var(--text-primary); font-size: 14px; flex: 1; }
.search-bar-big input::placeholder { color: var(--text-muted); }

.explore-tabs { display: flex; gap: var(--sp-2); padding: 14px 20px 6px; flex-wrap: wrap; }

#explore-content { padding: 0; }

.trending-section { padding: 0 20px; }
.trending-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  transition: all 0.18s ease;
}
.trending-item:hover { background: rgba(255,255,255,0.04); }
.trending-rank { font-size: 24px; font-weight: 900; color: var(--text-muted); width: 36px; text-align: center; }
.trending-game-icon {
  position: relative;
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  font-size: 24px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
  overflow: hidden;
}
/* Cover thumbnail overlays the icon fallback; removes itself on error. */
.trending-game-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.trending-info { flex: 1; }
.trending-name { font-weight: 700; font-size: 15px; }
.trending-posts { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.trending-change { font-size: 12px; font-weight: 700; }
.trending-change.up { color: var(--accent-green); }
.trending-change.down { color: var(--accent-red); }

/* ================================================================
   GAMES GRID
   ================================================================ */
.games-filter-row { display: flex; gap: 6px; padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,0.06); flex-wrap: wrap; }
.filter-btn {
  background: var(--bg-card);
  border: 1px solid transparent;
  color: var(--text-secondary);
  padding: 6px var(--sp-4);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}
.filter-btn:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.filter-btn:active { transform: scale(0.96); }
.filter-btn.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-mid); }

.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--sp-4);
  padding: 20px;
}
.game-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
}
.game-card:hover {
  border-color: var(--accent-muted);
  transform: translateY(-2px);
  background: var(--bg-card-hover);
}
.game-card:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.game-cover {
  height: 110px;
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-card-hover));
  display: flex; align-items: center; justify-content: center;
  font-size: 48px;
  position: relative;
}
.game-cover::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 40px;
  background: linear-gradient(transparent, var(--bg-card));
  z-index: 2;
}
/* Cover image overlays the gradient+icon fallback; if it errors it removes
   itself (see onerror) and the fallback shows through. */
.game-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.game-cover-fallback { position: relative; z-index: 0; }
.game-info { padding: 10px 12px 12px; }
.game-title { font-weight: 700; font-size: 13px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-genre { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
.game-stats { display: flex; gap: var(--sp-2); align-items: center; }
.game-players { font-size: 11px; color: var(--accent-green); font-weight: 600; }
.game-rating { font-size: 11px; color: var(--accent-gold); }
.game-rank-badge {
  position: absolute;
  top: 8px; left: 8px;
  background: rgba(8,8,17,0.85);
  color: var(--accent-gold);
  border-radius: var(--radius-xs);
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 800;
  z-index: 2;
  backdrop-filter: blur(4px);
}
.game-follow-btn {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 3;
  background: rgba(8,8,17,0.8);
  border: 1px solid var(--border-accent);
  color: var(--accent);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: all var(--transition);
}
.game-follow-btn:hover { background: var(--accent); color: white; }
.game-follow-btn.following { background: var(--accent-mid); }
.game-steam-btn {
  display: block;
  margin-top: 8px;
  padding: 6px 10px;
  background: #1b2838;
  color: #c7d5e0;
  border: 1px solid #4c6b22;
  border-radius: var(--radius-xs);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.game-steam-btn:hover { background: #4c6b22; color: #fff; }

.gc-steam-btn {
  display: inline-block;
  margin-top: 16px;
  padding: 10px 20px;
  background: #1b2838;
  color: #c7d5e0;
  border: 1px solid #4c6b22;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.gc-steam-btn:hover { background: #4c6b22; color: #fff; }

/* ================================================================
   PARTY LOBBY — 3-column gaming lobby
   ================================================================ */
.party-lobby {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 300px;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  align-items: start;
}
.party-rooms-col, .party-side-col { position: sticky; top: 88px; }
.party-rooms-head { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.party-search-wrap {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0 12px; color: var(--text-muted);
}
.party-search-wrap input { flex: 1; background: none; border: none; outline: none; color: var(--text-primary); font-size: 13px; height: 36px; }
.party-rooms-list { display: flex; flex-direction: column; gap: var(--sp-2); max-height: calc(100vh - 180px); overflow-y: auto; padding-right: 2px; }
.party-rooms-loading, .party-rooms-empty { padding: 28px 14px; text-align: center; color: var(--text-muted); font-size: 13px; }
.party-rooms-empty p { font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }

/* Room cards — live rooms */
.party-room-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--sp-4); cursor: pointer;
  transition: border-color var(--transition), background var(--transition), transform var(--transition-fast), box-shadow var(--transition);
}
.party-room-card:hover { border-color: var(--border-accent); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.party-room-card.active { border-color: var(--accent); background: var(--accent-subtle); box-shadow: 0 0 0 1px var(--accent-muted); }
.party-room-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.party-room-game { font-size: 13px; font-weight: 800; letter-spacing: -0.01em; }
.party-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-green); box-shadow: 0 0 0 3px var(--accent-subtle); }
.party-live-dot.party-full { background: var(--text-muted); box-shadow: none; }
.party-live-dot.party-filling { background: var(--accent-gold); }
.party-room-host { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.party-room-av { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: #fff; }
.party-room-hostmeta { min-width: 0; }
.party-room-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.party-room-handle { font-size: 11px; color: var(--text-muted); }
.party-room-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.45; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.party-room-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.party-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; color: var(--text-secondary); background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 3px 9px; white-space: nowrap; }
.party-chip-mic { color: var(--accent-light); border-color: var(--accent-mid); }
.party-room-slots { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.party-pips { display: inline-flex; gap: 3px; }
.party-pip { width: 7px; height: 7px; border-radius: 50%; background: var(--bg-card-hover); box-shadow: inset 0 0 0 1px var(--border); }
.party-pip.on { background: var(--accent-green); box-shadow: none; }
.party-room-time { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--text-muted); }
.party-room-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lfg-mic-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 11px 14px; }
.lfg-mic-label { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.lfg-mic-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.party-room-count { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.party-room-open { color: var(--accent-green); }
.party-room-join { background: var(--accent); color: #fff; border: none; border-radius: var(--radius-full); font-size: 11px; font-weight: 700; padding: 5px 14px; cursor: pointer; transition: background var(--transition-fast), transform var(--transition-fast); }
.party-room-join:hover { background: var(--accent-2); transform: translateY(-1px); }
.party-room-join:disabled { opacity: 0.5; cursor: default; transform: none; }
.party-room-actions { display: flex; align-items: center; gap: 7px; }
.party-room-leave {
  background: transparent; color: var(--text-secondary); border: 1px solid var(--border);
  border-radius: var(--radius-full); font-size: 11px; font-weight: 700; padding: 5px 13px; cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.party-room-leave:hover { background: rgba(239,68,68,0.12); color: #ef4444; border-color: rgba(239,68,68,0.4); }
.party-room-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 9px; border-radius: var(--radius-full); }
.party-room-tag.yours { background: var(--accent-soft); color: var(--accent); }
.party-room-tag.joined { background: rgba(63,185,80,0.15); color: var(--accent-green); }
.party-room-tag.pending { background: var(--bg-input); color: var(--text-muted); }

/* Center — selected party */
.party-detail-col { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-5); min-height: 320px; }
.party-detail-back { display: none; }
.party-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.party-empty-icon { color: var(--text-muted); opacity: 0.5; margin-bottom: var(--sp-3); }
.party-empty-icon svg { width: 46px; height: 46px; }
.party-empty p { font-weight: 700; color: var(--text-secondary); font-size: 15px; margin-bottom: 6px; }
.party-empty span { font-size: 13px; max-width: 280px; margin: 0 auto; display: block; line-height: 1.5; }
.party-detail-top { display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-4); }
.party-detail-game { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.party-status { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 10px; border-radius: var(--radius-full); }
.party-status-open { background: rgba(63,185,80,0.15); color: var(--accent-green); }
.party-status-filling { background: rgba(201,162,39,0.15); color: var(--accent-gold); }
.party-status-full { background: var(--bg-input); color: var(--text-muted); }
.party-detail-host { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.party-host-av { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; }
.party-host-meta { flex: 1; min-width: 0; }
.party-host-name { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.party-host-handle { font-size: 12px; color: var(--text-muted); }
.party-detail-tags { display: flex; gap: 6px; }
.party-tag { font-size: 11px; font-weight: 600; color: var(--text-secondary); background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 3px 10px; }
.party-detail-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin: var(--sp-4) 0; padding: var(--sp-3) var(--sp-4); background: var(--bg-input); border-radius: var(--radius-sm); border-left: 2px solid var(--accent-muted); }
.party-slots-block { margin-top: var(--sp-4); }
.party-slots-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.party-slots-count { color: var(--accent); }
.party-slots-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); }
.party-slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--sp-3) 6px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-input); transition: border-color var(--transition-fast), transform var(--transition-fast); }
.party-slot.filled { cursor: pointer; }
.party-slot.filled:hover { border-color: var(--border-accent); transform: translateY(-2px); }
.party-slot.open { border-style: dashed; border-color: var(--border-accent); }
.party-slot-av { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: #fff; }
.party-slot-av.empty { background: var(--accent-subtle); color: var(--accent); font-weight: 300; font-size: 22px; }
.party-slot-name { font-size: 11px; font-weight: 600; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.party-slot-role { font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.party-slot-role.host { color: var(--accent); font-weight: 700; }
.party-slot-remove { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 50%; border: none; background: rgba(0,0,0,0.5); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--transition-fast), background var(--transition-fast); }
.party-slot.filled:hover .party-slot-remove { opacity: 1; }
.party-slot-remove:hover { background: var(--accent-red); }
.party-detail-actions { margin-top: var(--sp-5); display: flex; justify-content: flex-end; }
.party-danger-btn:hover { border-color: var(--accent-red); color: var(--accent-red); }

/* Right — requests / members */
.party-side-block { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); margin-bottom: var(--sp-3); }
.party-side-title { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: var(--sp-3); }
.party-side-count { background: var(--accent-subtle); color: var(--accent); border-radius: var(--radius-full); padding: 1px 8px; font-size: 11px; }
.party-side-empty { font-size: 12px; color: var(--text-muted); padding: 4px 0; }
.party-side-note { font-size: 12px; color: var(--text-secondary); background: var(--accent-subtle); border: 1px solid var(--border-accent); border-radius: var(--radius-sm); padding: 10px 12px; line-height: 1.5; }
.party-request-card { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--sp-3); margin-bottom: var(--sp-2); }
.party-request-head { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.party-req-av { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: #fff; }
.party-req-meta { min-width: 0; }
.party-req-name { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 5px; }
.party-req-handle { font-size: 11px; color: var(--text-muted); }
.party-request-msg { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin: 8px 0; padding: 8px 10px; background: var(--bg-card); border-radius: var(--radius-xs); }
.party-request-actions { display: flex; gap: 6px; }
.party-request-actions .btn-sm { flex: 1; }
.party-member-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.party-mem-av { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; color: #fff; cursor: pointer; }
.party-mem-meta { flex: 1; min-width: 0; cursor: pointer; }
.party-mem-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.party-mem-handle { font-size: 11px; color: var(--text-muted); }
.party-mem-role { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); }
.party-mem-remove { font-size: 11px; font-weight: 600; color: var(--text-muted); background: none; border: 1px solid var(--border); border-radius: var(--radius-full); padding: 3px 10px; cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast); }
.party-mem-remove:hover { color: var(--accent-red); border-color: var(--accent-red); }
.party-request-target { font-size: 13px; color: var(--text-secondary); padding: 10px 12px; background: var(--bg-input); border-radius: var(--radius-sm); }

@media (max-width: 1280px) {
  .party-lobby { grid-template-columns: 260px minmax(0,1fr); }
  .party-side-col { display: none; }
}
@media (max-width: 760px) {
  .party-lobby { grid-template-columns: 1fr; }
  .party-detail-col, .party-side-col { display: none; }
  .party-lobby.show-detail .party-rooms-col { display: none; }
  .party-lobby.show-detail .party-detail-col { display: block; }
  .party-lobby.show-detail .party-side-col { display: block; }
  .party-detail-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--sp-3); background: var(--bg-input); border: 1px solid var(--border); color: var(--text-secondary); border-radius: var(--radius-full); padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
}

/* ================================================================
   LFG (legacy cards — game community tab)
   ================================================================ */
.lfg-filter-row {
  display: flex;
  gap: var(--sp-2);
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.lfg-container { padding: 16px 20px; display: flex; flex-direction: column; gap: var(--sp-3); }

.lfg-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius);
  padding: 16px;
  transition: all 0.15s ease;
  cursor: pointer;
}
.lfg-card:hover { border-color: rgba(34,197,94,0.25); background: rgba(255,255,255,0.03); }
.lfg-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.lfg-user-info { display: flex; align-items: center; gap: 10px; }
.lfg-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-blue));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; color: white;
}
.lfg-username { font-weight: 700; font-size: 14px; }
.lfg-rank-region { font-size: 12px; color: var(--text-muted); }
.lfg-status {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}
.lfg-open { background: rgba(34,197,94,0.15); color: var(--accent-green); }
.lfg-filling { background: rgba(245,158,11,0.15); color: var(--accent-gold); }
.lfg-full { background: rgba(239,68,68,0.15); color: var(--accent-red); }

.lfg-game-row { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 8px; }
.lfg-game-name { font-weight: 700; font-size: 15px; }
.lfg-mode { font-size: 12px; color: var(--text-muted); }
.lfg-description { font-size: 13px; color: var(--text-secondary); margin-bottom: 10px; line-height: 1.5; }
.lfg-footer { display: flex; align-items: center; justify-content: space-between; }
.lfg-slots {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.slot-dots { display: flex; gap: var(--sp-1); }
.slot-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--border);
  border: 1px solid var(--border-accent);
}
.slot-dot.filled { background: var(--accent-green); border-color: var(--accent-green); box-shadow: 0 0 5px var(--accent-green); }
.slot-dot.me { background: var(--accent); border-color: var(--accent); }
.lfg-join-btn {
  background: linear-gradient(135deg, var(--accent-green), #16a34a);
  color: white;
  border: none;
  border-radius: var(--radius-full);
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
}
.lfg-join-btn:hover { opacity: 0.85; }
.lfg-join-btn:disabled { background: var(--bg-card-hover); color: var(--text-muted); transform: none; box-shadow: none; cursor: default; }
.lfg-delete-btn {
  background: none;
  border: 1px solid rgba(239,68,68,0.3);
  color: var(--accent-red);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}
.lfg-delete-btn:hover { background: rgba(239,68,68,0.1); }

/* ================================================================
   TOURNAMENTS
   ================================================================ */
#tournaments-container { padding: 16px 20px; display: flex; flex-direction: column; gap: var(--sp-4); }

.tournament-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition);
}
.tournament-card:hover { border-color: var(--accent-gold); }
.tournament-banner {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  position: relative;
  overflow: hidden;
}
.tournament-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.5;
}
.tournament-live-badge {
  position: absolute;
  top: 10px; right: 10px;
  background: var(--accent-red);
  color: white;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: white;
  animation: pulse 1s infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; } 50% { opacity: 0.3; }
}
.tournament-info { padding: 14px 16px; }
.tournament-name { font-weight: 800; font-size: 16px; margin-bottom: 6px; }
.tournament-meta { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: 10px; }
.tournament-meta-item { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: var(--sp-1); }
.tournament-prize { font-size: 18px; font-weight: 900; color: var(--accent-gold); margin-bottom: 10px; }
.tournament-footer { display: flex; align-items: center; justify-content: space-between; }
.tournament-teams { font-size: 13px; color: var(--text-secondary); }
.tournament-register-btn {
  background: linear-gradient(135deg, var(--accent-gold), var(--accent-orange));
  color: white;
  border: none;
  border-radius: var(--radius-full);
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/* ================================================================
   MESSAGES
   ================================================================ */
.messages-layout { display: flex; height: 100vh; overflow: hidden; }
.messages-sidebar {
  width: 280px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}
.messages-sidebar-header {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.messages-sidebar-header h3 { font-size: 16px; font-weight: 800; }
.messages-search {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.messages-search svg { width: 14px; height: 14px; stroke: var(--text-muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.messages-search input { background: none; border: none; outline: none; color: var(--text-primary); font-size: 13px; flex: 1; }
#conversations-list { flex: 1; overflow-y: auto; }
.conv-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}
.conv-item:hover { background: var(--bg-card); }
.conv-item.active { background: var(--accent-soft); }
.conv-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-blue));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; color: white;
  position: relative;
  flex-shrink: 0;
}
.conv-online-dot {
  position: absolute;
  bottom: 1px; right: 1px;
  width: 10px; height: 10px;
  background: var(--accent-green);
  border-radius: 50%;
  border: 2px solid var(--bg-primary);
}
.conv-info { flex: 1; min-width: 0; }
.conv-name { font-weight: 700; font-size: 13px; }
.conv-last-msg { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-meta { text-align: right; flex-shrink: 0; }
.conv-time { font-size: 11px; color: var(--text-muted); }
.conv-unread {
  background: var(--accent);
  color: white;
  font-size: 10px;
  font-weight: 700;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-top: 4px;
  margin-left: auto;
}

.messages-chat { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.chat-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Call button in chat header */
.msg-call-btn {
  background: none; border: none; color: rgba(255,255,255,0.5);
  cursor: pointer; padding: 8px; border-radius: var(--radius-sm); display: flex;
  align-items: center; justify-content: center; transition: all 0.15s;
  margin-left: auto;
}
.msg-call-btn:hover { color: var(--accent); background: var(--accent-soft); }
.msg-call-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.msg-call-btn svg { stroke: currentColor; fill: none; }

/* Voice call overlay */
#call-overlay {
  position: fixed; inset: 0; z-index: var(--z-top);
  background: rgba(0,0,0,0.85); backdrop-filter: blur(20px);
  display: none; align-items: center; justify-content: center;
}
.call-modal {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
  padding: 40px; text-align: center;
}
.call-avatar {
  width: 100px; height: 100px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; font-weight: 700; color: #fff;
  box-shadow: 0 0 40px var(--accent-strong);
}
.call-name { font-size: 22px; font-weight: 700; color: #fff; }
.call-status { font-size: 14px; color: rgba(255,255,255,0.5); }
.call-timer { font-size: 18px; font-weight: 600; color: rgba(255,255,255,0.7); min-height: 24px; }
.call-actions {
  display: flex; gap: var(--sp-5); margin-top: 24px;
}
.call-btn {
  width: 56px; height: 56px; border-radius: 50%; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
}
.call-btn:hover { transform: scale(1.1); }
.call-btn svg { stroke: #fff; fill: none; }
.call-accept {
  background: #22c55e; box-shadow: none;
}
.call-end {
  background: #ef4444; box-shadow: none;
}
.call-mute {
  background: rgba(255,255,255,0.12); color: #fff;
}
.call-mute.active { background: #f59e0b; }
.call-mute.active svg { stroke: #000; }
@keyframes callPulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--accent-subtle); }
  50% { box-shadow: 0 0 0 6px var(--accent-soft); }
}
#call-overlay[style*="flex"] .call-avatar { animation: callPulse 2s ease-in-out infinite; }

.chat-messages { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: var(--sp-3); }
.chat-msg {
  display: flex;
  gap: var(--sp-2);
  /* Fill more of the (now wider) pane, but cap at a comfortable reading width
     so bubbles never sprawl across a big monitor. */
  max-width: min(72%, 560px);
}
.chat-msg.mine { flex-direction: row-reverse; align-self: flex-end; }
.chat-msg-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-blue));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px; color: white;
  flex-shrink: 0;
}
.chat-msg-bubble {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.5;
  max-width: 100%;
}
.chat-msg.mine .chat-msg-bubble {
  background: linear-gradient(135deg, var(--accent-mid), var(--accent-soft));
  border-color: var(--border-accent);
}
.chat-msg-time { font-size: 10px; color: var(--text-muted); margin-top: 4px; text-align: right; }
.chat-seen-row { font-size: 10.5px; color: var(--text-muted); text-align: right; padding: 2px 6px 6px; font-weight: 600; letter-spacing: .2px; }

/* "DXED is thinking" animated typing bubble */
.chat-typing { display: inline-flex; align-items: center; gap: 5px; padding: 13px 14px; }
.chat-typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-muted); display: inline-block;
  animation: chatTypingBounce 1.3s infinite ease-in-out both;
}
.chat-typing span:nth-child(1) { animation-delay: -0.32s; }
.chat-typing span:nth-child(2) { animation-delay: -0.16s; }
@keyframes chatTypingBounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}
.chat-thinking-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; font-style: italic; }

/* ================================================================
   DXED ASSISTANT — ChatGPT-style threaded chat overlay
   ================================================================ */
.msg-assistant-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent); color: #fff; border: none;
  border-radius: var(--radius-full); padding: 8px 14px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: filter var(--transition-fast); white-space: nowrap;
}
.msg-assistant-btn:hover { filter: brightness(1.08); }

.assistant-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.assistant-box {
  width: 100%; max-width: 960px; height: 100%; max-height: 760px;
  display: flex; background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-lift);
}
.assistant-sidebar {
  width: 240px; flex-shrink: 0; display: flex; flex-direction: column;
  background: var(--bg-tertiary); border-right: 1px solid var(--border);
}
.assistant-sidebar-head { padding: 14px; border-bottom: 1px solid var(--border); }
.assistant-sidebar-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.assistant-brand {
  display: flex; align-items: center; gap: 8px; font-weight: 800;
  font-size: 14px; color: var(--text-primary); min-width: 0;
}
.assistant-brand span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assistant-drawer-close { display: none; }
.assistant-brand-avatar, .assistant-welcome-avatar, .assistant-msg-avatar.bot {
  background: linear-gradient(135deg,#cc785c,#a85f45);
  background-image: url('/dxed-bot-avatar.svg'); background-size: cover; background-position: center;
}
.assistant-brand-avatar { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; }
.assistant-new-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%;
  background: var(--accent); color: #fff; border: none; border-radius: var(--radius-md);
  padding: 10px; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: filter var(--transition-fast);
}
.assistant-new-btn:hover { filter: brightness(1.08); }
.assistant-chat-list { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.assistant-empty-list { padding: 20px 12px; text-align: center; color: var(--text-muted); font-size: 12px; }
.assistant-chat-item {
  display: flex; align-items: center; gap: 6px; padding: 9px 10px;
  border-radius: var(--radius-sm); cursor: pointer; color: var(--text-secondary);
  transition: background var(--transition-fast);
}
.assistant-chat-item:hover { background: var(--bg-hover); }
.assistant-chat-item.active { background: var(--accent-subtle); color: var(--text-primary); }
.assistant-chat-item-title { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assistant-chat-del {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  padding: 2px; opacity: 0; transition: opacity var(--transition-fast), color var(--transition-fast); flex-shrink: 0;
}
.assistant-chat-item:hover .assistant-chat-del { opacity: 1; }
.assistant-chat-del:hover { color: var(--danger, #ef4444); }
.assistant-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.assistant-header {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.assistant-header-title { flex: 1; font-weight: 700; font-size: 15px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assistant-icon-btn { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 6px; border-radius: var(--radius-sm); display: flex; transition: background var(--transition-fast), color var(--transition-fast); }
.assistant-icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.assistant-menu-btn { display: none; }
.assistant-messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.assistant-msg { display: flex; gap: 12px; max-width: 100%; }
.assistant-msg.user { flex-direction: row-reverse; }
.assistant-msg-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #fff;
}
.assistant-msg-avatar.user { background: linear-gradient(135deg, var(--accent), var(--accent-mid)); }
.assistant-msg-bubble {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 11px 15px;
  font-size: 14px; line-height: 1.6; color: var(--text-primary);
  white-space: pre-wrap; word-break: break-word; max-width: 78%;
}
.assistant-msg.user .assistant-msg-bubble {
  background: linear-gradient(135deg, var(--accent-mid), var(--accent-soft));
  border-color: var(--border-accent);
}
.assistant-welcome { margin: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px; }
.assistant-welcome-avatar { width: 56px; height: 56px; border-radius: 50%; margin-bottom: 6px; }
.assistant-welcome-title { font-size: 20px; font-weight: 800; color: var(--text-primary); }
.assistant-welcome-sub { font-size: 13px; color: var(--text-muted); max-width: 320px; }
.assistant-input-row { display: flex; align-items: flex-end; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--border); }
.assistant-input-row textarea {
  flex: 1; resize: none; max-height: 140px; background: var(--bg-input);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 11px 15px; color: var(--text-primary); font-size: 14px; font-family: inherit;
  outline: none; line-height: 1.5;
}
.assistant-input-row textarea:focus { border-color: var(--border-accent); }
.assistant-send {
  background: var(--accent); color: #fff; border: none; border-radius: 50%;
  width: 40px; height: 40px; flex-shrink: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: filter var(--transition-fast);
}
.assistant-send:hover { filter: brightness(1.08); }
@media (max-width: 720px) {
  .assistant-overlay { padding: 0; }
  .assistant-box { max-height: none; border-radius: 0; border: none; position: relative; }
  .assistant-menu-btn { display: flex; }
  .assistant-drawer-close { display: flex; }
  /* Full-screen slide-over drawer so it never overlaps the chat */
  .assistant-sidebar {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; z-index: 30; border-right: none;
    transform: translateX(-100%); transition: transform var(--transition);
  }
  .assistant-sidebar.open { transform: translateX(0); }
  .assistant-msg-bubble { max-width: 88%; }
}

.chat-input-row {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  align-items: center;
}
.chat-input-row input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 10px 16px;
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
  transition: border-color var(--transition);
}
.chat-input-row input:focus { border-color: var(--accent); }
.chat-input-row input::placeholder { color: var(--text-muted); }
.chat-input-row input[type="file"] { flex: 0 0 auto; }

/* DM attach (photo/video) button */
.chat-attach-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.chat-attach-btn:hover { color: var(--accent); border-color: var(--accent); }

/* Pending-attachment preview chip above the input */
.chat-media-preview {
  display: flex;
  align-items: center;
  padding: 8px 20px 0;
}
.chat-media-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px 10px 6px 6px;
  max-width: 100%;
}
.chat-media-chip img, .chat-media-chip video {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  flex: 0 0 auto;
}
.chat-media-label { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-media-remove {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: none; border: none; color: var(--text-muted); cursor: pointer;
}
.chat-media-remove:hover { color: var(--text-primary); background: var(--bg-card-hover); }
.chat-media-uploading { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); }
.chat-media-spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--accent);
  animation: spin 0.7s linear infinite;
}

/* Photo/video inside a DM bubble */
.chat-msg-media {
  border-radius: 16px;
  overflow: hidden;
  max-width: 260px;
  line-height: 0;
}
.chat-msg-media img, .chat-msg-media video {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
}
.chat-msg-media img { cursor: pointer; }
/* Stack the attachment above its caption; reply button still sits beside the stack. */
.chat-msg-stack { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.chat-msg:not(.mine) .chat-msg-stack { align-items: flex-start; }
.chat-msg.has-media .chat-msg-bubble { width: fit-content; max-width: 260px; }

/* ================================================================
   NOTIFICATIONS
   ================================================================ */
/* Keep "Notifications" and "Mark all read" on one row (inline), even on mobile
   where the generic .section-header switches to a stacked column layout. */
#notifications-section .section-header { flex-direction: row; align-items: center; flex-wrap: nowrap; }
#notifications-section .section-header h2 { flex: 1; min-width: 0; }
#notifications-section .section-header .btn-ghost { flex-shrink: 0; white-space: nowrap; }
.notif-filter-row { display: flex; gap: var(--sp-1); padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,0.04); }
#notifications-container { padding: 0; }
/* ── Notifications (clean, X/TikTok-style) ── */
.notif-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--border);
  transition: background .15s ease;
  cursor: pointer;
  position: relative;
}
.notif-item:hover { background: var(--bg-card-hover); }
/* Unread is subtle: just a tiny purple dot (no bar, no tinted background). */

/* Avatar + corner type-badge */
.notif-av-wrap { position: relative; flex-shrink: 0; width: 46px; height: 46px; }
.notif-av {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; color: #fff;
  background: var(--bg-elevated); overflow: hidden; cursor: pointer;
}
.notif-av-empty { background: var(--bg-elevated); border: 1px solid var(--border); }
/* Overlapping avatar stack when several people did the same thing */
.notif-av-stack { position: relative; width: 46px; height: 46px; }
.notif-av-stack .notif-av-stacked {
  position: absolute; width: 30px; height: 30px; font-size: 12px; font-weight: 800;
  border-radius: 50%; border: 2px solid var(--bg-secondary); overflow: hidden; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.notif-av-stack .notif-av-stacked:nth-child(1) { top: 0; left: 0; }
.notif-av-stack .notif-av-stacked:nth-child(2) { bottom: 0; right: 0; }
.notif-av-stack .notif-av-stacked:nth-child(3) { bottom: 0; left: 7px; }
.notif-type-badge {
  position: absolute; right: -3px; bottom: -3px; z-index: 12;
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: var(--accent);
  border: 2.5px solid var(--bg-secondary);
}
.notif-type-badge.notif-type-reaction, .notif-type-badge.notif-type-like { background: #ff5775; }
.notif-type-badge.notif-type-follow { background: #8b5cf6; }
.notif-type-badge.notif-type-mention { background: #3b9dff; }
.notif-type-badge.notif-type-message { background: #8b5cf6; }
.notif-type-badge.notif-type-repost { background: #26d07c; }
.notif-type-badge.notif-type-system { background: var(--accent); }
.notif-content { flex: 1; min-width: 0; }
.notif-text { font-size: 14px; line-height: 1.4; color: var(--text-secondary); }
.notif-text strong { font-weight: 700; color: var(--text-primary); }
/* Post title/preview under the text — muted, single line, ellipsised. */
.notif-preview {
  font-size: 12.5px; line-height: 1.35; color: var(--text-muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.notif-time { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; font-weight: 500; }
.notif-collab-actions { display: flex; gap: 8px; margin-top: 8px; }
.notif-collab-accept, .notif-collab-decline { font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: 8px; cursor: pointer; border: 1px solid var(--border); }
.notif-collab-accept { background: var(--accent); color: #fff; border-color: transparent; }
.notif-collab-decline { background: transparent; color: var(--text-secondary); }
.unread-dot {
  width: 9px; height: 9px; background: #8b5cf6; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(139,92,246,.5); animation: notifPulse 2s infinite;
}
@keyframes notifPulse { 0% { box-shadow: 0 0 0 0 rgba(139,92,246,.45);} 70% { box-shadow: 0 0 0 6px rgba(139,92,246,0);} 100% { box-shadow: 0 0 0 0 rgba(139,92,246,0);} }

/* ================================================================
   LEADERBOARD
   ================================================================ */
.lb-time-filter { display: flex; gap: var(--sp-1); padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,0.04); }
#leaderboard-container { padding: 16px 20px; }
.lb-table { display: flex; flex-direction: column; gap: 3px; }
.lb-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
  cursor: pointer;
  position: relative;
}
.lb-row:hover { border-color: var(--accent-muted); transform: translateX(3px); background: rgba(255,255,255,0.03); }
.lb-row.top1 { border-color: rgba(245,158,11,0.15); background: rgba(245,158,11,0.04); }
.lb-row.top2 { border-color: rgba(148,163,184,0.1); background: rgba(148,163,184,0.03); }
.lb-row.top3 { border-color: rgba(249,115,22,0.12); background: rgba(249,115,22,0.03); }
.lb-rank { font-size: 20px; font-weight: 900; width: 36px; text-align: center; flex-shrink: 0; }
.lb-rank.r1 { color: var(--accent-gold); }
.lb-rank.r2 { color: #94a3b8; }
.lb-rank.r3 { color: var(--accent-orange); }
.lb-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-blue));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; color: white;
  flex-shrink: 0;
}
.lb-info { flex: 1; }
.lb-name { font-weight: 700; font-size: 14px; }
.lb-game { font-size: 12px; color: var(--text-muted); }
.lb-stats { display: flex; gap: var(--sp-4); align-items: center; }
.lb-stat { text-align: right; }
.lb-stat-val { font-size: 16px; font-weight: 800; color: var(--accent); }
.lb-stat-lbl { font-size: 10px; color: var(--text-muted); }
.lb-change { font-size: 12px; font-weight: 700; }
.lb-change.up { color: var(--accent-green); }
.lb-change.down { color: var(--accent-red); }
.lb-change.same { color: var(--text-muted); }

/* ================================================================
   PROFILE
   ================================================================ */
.profile-banner {
  height: 180px;
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-card));
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
}
.profile-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 30%, rgba(6,6,16,0.4) 60%, var(--bg-primary) 100%);
  pointer-events: none;
}
.banner-upload-btn {
  position: absolute; bottom: var(--sp-3); right: var(--sp-3);
  z-index: var(--z-card);
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.15);
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition-fast);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.banner-clickable { cursor: pointer; }
.banner-upload-btn:hover { background: rgba(0,0,0,0.75); }
.banner-upload-btn svg { pointer-events: none; }
.profile-header-info { padding: 0 24px 8px; position: relative; z-index: var(--z-card); }
.profile-avatar-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: -58px;
  margin-bottom: 18px;
}
.profile-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-blue));
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 24px; color: white;
  border: 3px solid var(--bg-primary);
  box-shadow: 0 0 24px var(--accent-mid);
}
.profile-actions-row { display: flex; gap: 10px; margin-bottom: 12px; }
.profile-name { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.profile-handle { color: var(--text-muted); font-size: 14px; margin-bottom: 6px; }
.profile-bio { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); margin: 4px 0 14px; }
.profile-bio-empty { color: var(--text-muted); font-style: italic; }
.profile-joined { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); margin: 0 0 14px; font-weight: 500; }
.profile-joined svg { opacity: 0.7; }
.profile-socials-row { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.profile-social-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-sm); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color: var(--text-secondary); transition: all .25s ease; }
.profile-social-link:hover { background: var(--accent-muted); border-color: var(--accent); transform: translateY(-3px); color: var(--accent-light); }
.profile-social-link svg { display: block; }
.profile-stats-row {
  display: flex;
  gap: 0;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.profile-stat {
  cursor: pointer; padding: 12px 22px; border-radius: var(--radius);
  transition: all .25s ease; text-align: center;
  border: 1px solid transparent;
  position: relative;
}
.profile-stat:hover {
  background: var(--accent-hover);
  border-color: var(--accent-muted);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px var(--accent-soft);
}
.profile-stat:hover .stat-label { color: var(--text-primary); }
.profile-stat:hover .stat-val { color: var(--accent-light); }
.stat-val { font-size: 18px; font-weight: 800; display: block; transition: color .2s; }
.stat-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .8px; font-weight: 600; transition: color .2s; }
.profile-game-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.profile-game-tag {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 7px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
}
.profile-game-tag:hover { border-color: var(--accent-mid); color: var(--accent-light); background: var(--accent-subtle); }

.profile-tabs { display: flex; border-bottom: 1px solid rgba(255,255,255,0.06); margin-top: 4px; }
.profile-tab {
  flex: 1;
  padding: 14px 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.35);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  position: relative;
}
.profile-tab:hover { color: rgba(255,255,255,0.7); background: rgba(122,126,140,.04); }
.profile-tab.active {
  color: var(--accent-light);
  border-bottom-color: var(--accent-light);
  font-weight: 700;
  background: linear-gradient(to top, var(--accent-subtle), transparent);
}

/* ── Profile entrance animations ── */
.profile-header-info { animation: profile-fade-up .5s ease-out; }
.profile-banner { animation: profile-banner-in .6s ease-out; }
@keyframes profile-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes profile-banner-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.profile-stats-row { animation: profile-fade-up .5s ease-out .15s both; }
.profile-tabs { animation: profile-fade-up .5s ease-out .25s both; }

/* ================================================================
   COMPANY / BRAND PROFILE
   ================================================================ */
.company-profile { position: relative; }

/* ── Company Banner ── */
.company-banner {
  height: 220px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.company-banner-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--accent-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--accent-subtle) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: company-grid-drift 20s linear infinite;
  opacity: 0.6;
  pointer-events: none;
}
@keyframes company-grid-drift {
  from { transform: translate(0, 0); }
  to { transform: translate(40px, 40px); }
}
.company-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(6,6,16,0.4) 65%, var(--bg-primary) 100%);
  pointer-events: none;
}
.company-banner-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--bg-primary));
  z-index: 2;
  pointer-events: none;
}

/* ── Company Header ── */
.company-header {
  padding: 0 24px 0;
  position: relative;
  z-index: 3;
  animation: profile-fade-up 0.5s ease-out 0.2s both;
}
.company-header-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: -50px;
  margin-bottom: 16px;
  position: relative;
  z-index: 3;
}
.company-avatar-wrap { position: relative; }
.company-avatar-lg {
  box-shadow: 0 0 0 3px var(--bg-primary), 0 0 0 4px var(--border-accent) !important;
}
.company-actions { display: flex; gap: 10px; margin-bottom: 12px; }

/* ── Company Identity ── */
.company-identity { margin-bottom: 14px; }
.company-name-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.company-name {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #fff 0%, var(--accent-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.company-org-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px 10px;
  border-radius: var(--radius-lg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--accent-muted), var(--accent-soft));
  border: 1px solid var(--accent-mid);
  color: var(--accent-light);
}
.company-handle {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.company-bio {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 480px;
}

/* ── Company Stats ── */
.company-stats-row {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 18px 0 6px;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  animation: profile-fade-up 0.5s ease-out 0.35s both;
}
.company-stat {
  padding: 8px 24px;
  text-align: center;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all 0.25s ease;
}
.company-stat:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
}
.company-stat-val {
  font-size: 22px;
  font-weight: 900;
  display: block;
  letter-spacing: -0.02em;
  transition: color 0.2s;
}
.company-stat:hover .company-stat-val { color: var(--accent-light); }
.company-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  margin-top: 2px;
  display: block;
}
.company-stat-divider {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,0.08);
  flex-shrink: 0;
}

/* ── Company Tabs ── */
.company-tabs {
  animation: profile-fade-up 0.5s ease-out 0.45s both;
  border-bottom: 1px solid var(--accent-soft);
}
.company-follow-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: none;
  padding: var(--sp-2) var(--sp-6);
  font-weight: 700;
  box-shadow: 0 0 16px var(--accent-strong);
  transition: all 0.25s ease;
}
.company-follow-btn:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sp-3);
  padding: 20px;
}
.achievement-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
}
.achievement-card:hover { border-color: var(--accent-gold); transform: translateY(-2px); }
.achievement-card.locked { opacity: 0.4; filter: grayscale(1); }
.ach-icon { font-size: 36px; margin-bottom: 8px; }
.ach-name { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.ach-desc { font-size: 11px; color: var(--text-muted); }
.ach-progress {
  margin-top: 8px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.ach-progress-bar { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-blue)); border-radius: 2px; }

/* ================================================================
   RIGHT SIDEBAR WIDGETS
   ================================================================ */
#right-sidebar { padding: 16px 4px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.05) transparent; }
.widget {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 16px 14px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.widget:hover {
  border-color: rgba(255,255,255,0.12);
}
.widget-link { margin-left: auto; font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--accent-light); cursor: pointer; }
.widget-link:hover { color: var(--text-primary); text-decoration: underline; }
.widget-title {
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.widget-count {
  margin-left: auto;
  background: rgba(34,197,94,0.1);
  color: #22c55e;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
}
.online-dot {
  width: 8px; height: 8px;
  background: var(--accent-green);
  border-radius: 50%;
}

.friends-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.friend-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.friend-item:hover { background: rgba(255,255,255,0.05); }
.friend-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-blue));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px; color: white;
  position: relative;
  flex-shrink: 0;
}
.friend-status-dot {
  position: absolute;
  bottom: 0; right: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--bg-widget);
}
.friend-info { flex: 1; min-width: 0; }
.friend-name { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.friend-game { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.trending-list { display: flex; flex-direction: column; gap: 6px; }
.trend-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition);
}
.trend-item:hover { background: rgba(255,255,255,0.05); }
.trend-icon { font-size: 22px; flex-shrink: 0; }
.trend-info { flex: 1; min-width: 0; }
.trend-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trend-players { font-size: 11px; color: var(--accent-green); }
.trend-rank { font-size: 18px; font-weight: 900; color: var(--text-muted); }

.hashtags-list { display: flex; flex-wrap: wrap; gap: 6px; }
.hashtag-pill {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  font-size: 12px;
  color: var(--accent);
  cursor: pointer;
  transition: all var(--transition);
}
.hashtag-pill:hover { background: var(--accent-muted); border-color: var(--accent); }

.quick-lfg-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.quick-lfg-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 8px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.quick-lfg-avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; color: #fff; }
.quick-lfg-info { flex: 1; min-width: 0; }
.quick-lfg-game { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quick-lfg-slots { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quick-join-btn {
  background: var(--accent-subtle);
  color: var(--accent);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-full);
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.quick-join-btn:hover { background: var(--accent-soft); border-color: var(--accent-mid); }
.quick-join-btn:disabled { opacity: 0.5; cursor: default; }

.lfg-widget { border-color: rgba(34,197,94,0.2); }

/* Collapsible widgets */
.widget-collapsible { padding: 0; }
.widget-collapsible summary.widget-title {
  padding: 12px 14px;
  margin-bottom: 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.widget-collapsible summary.widget-title::-webkit-details-marker { display: none; }
.widget-collapsible summary .chevron-icon {
  margin-left: auto;
  transition: transform 0.2s ease;
  opacity: 0.4;
}
.widget-collapsible[open] summary .chevron-icon {
  transform: rotate(180deg);
}
.widget-collapsible > :not(summary) {
  padding: 0 14px 12px;
}

/* ================================================================
   BUTTONS — Unified system
   ================================================================ */
/* Base button reset */
.btn-primary, .btn-secondary, .btn-ghost, .btn-danger {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2); border: none; cursor: pointer;
  font-size: 13px; font-weight: 600; font-family: inherit;
  height: var(--btn-height); padding: 0 var(--sp-4);
  border-radius: var(--btn-radius);
  transition: all var(--transition);
  white-space: nowrap; text-decoration: none;
}
.btn-primary svg, .btn-secondary svg, .btn-ghost svg, .btn-danger svg {
  width: 15px; height: 15px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.btn-primary {
  background: var(--accent); color: #fff;
}
.btn-primary:hover { background: var(--accent-2); }
.btn-primary:active { transform: scale(0.97); }

.btn-secondary {
  background: transparent; color: var(--text-primary);
  border: 1px solid var(--border); padding: 0 var(--sp-4);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.btn-secondary:active { transform: scale(0.97); }

.btn-ghost {
  background: transparent; color: var(--accent);
  padding: 0 var(--sp-3);
}
.btn-ghost:hover { background: var(--accent-soft); }

.btn-danger {
  background: var(--accent-red); color: #fff;
}
.btn-danger:hover { opacity: 0.9; }
.btn-danger:active { transform: scale(0.97); }

/* Size variants */
.btn-sm { height: var(--btn-height-sm); padding: 0 var(--sp-3); font-size: 12px; }
.btn-lg { height: 42px; padding: 0 var(--sp-6); font-size: 14px; }

/* Follow button state */
.btn-follow { background: var(--accent); color: #fff; }
.btn-following { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); }
.btn-following:hover { border-color: var(--accent-red); color: var(--accent-red); }

/* Icon button */
.icon-btn {
  background: transparent; border: none;
  color: var(--text-muted); cursor: pointer;
  padding: var(--sp-2); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition-fast);
}
.icon-btn:hover { background: rgba(255,255,255,0.06); color: var(--text-secondary); }
.icon-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ================================================================
   MODAL
   ================================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.hidden { display: none; }
.hidden { display: none !important; }
.modal-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 560px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
  animation: modalIn 0.2s var(--ease);
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-header h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.compose-area {
  display: flex;
  gap: var(--sp-3);
  padding: 16px 20px;
}
.compose-fields { flex: 1; }
.compose-fields textarea {
  width: 100%;
  min-height: 100px;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  color: var(--text-primary);
  font-size: 16px;
  font-family: inherit;
}
.compose-fields textarea::placeholder { color: var(--text-muted); }
.compose-meta-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 0; }
.char-counter { font-size: 12px; color: var(--text-muted); text-align: right; margin-top: 6px; }
.modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.compose-actions-row { display: flex; gap: var(--sp-1); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.modal-close-btn { position: absolute; top: 14px; right: 14px; }
.profile-modal-box { position: relative; max-width: 620px; max-height: 85vh; overflow-y: auto; padding: 0; }

/* ================================================================
   SELECTS / INPUTS
   ================================================================ */
.game-select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--input-radius);
  color: var(--text-secondary);
  font-size: 13px;
  height: var(--btn-height-sm);
  padding: 0 var(--sp-3);
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition);
}
.game-select:focus { border-color: var(--accent); }
.game-select option { background: var(--bg-card); }

/* ================================================================
   TOAST
   ================================================================ */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  left: auto;
  z-index: var(--z-top);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}
.toast { pointer-events: auto; }
.toast {
  position: relative;
  background: linear-gradient(180deg, rgba(28,30,38,0.96), rgba(18,20,26,0.96));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 13px 18px 13px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  box-shadow: 0 16px 44px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: toastIn 0.4s cubic-bezier(0.22, 1.2, 0.4, 1);
  max-width: 360px;
  overflow: hidden;
  backdrop-filter: blur(16px) saturate(140%);
}
/* Colored accent rail on the left edge */
.toast::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent); border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.toast-icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
}
.toast.success { border-color: rgba(34,197,94,0.28); }
.toast.success::before { background: #22c55e; }
.toast.success .toast-icon { background: rgba(34,197,94,0.14); color: #22c55e; }
.toast.error { border-color: rgba(239,68,68,0.3); }
.toast.error::before { background: #ef4444; }
.toast.error .toast-icon { background: rgba(239,68,68,0.14); color: #ef4444; }
.toast.info { border-color: var(--accent-muted); }
.toast.info::before { background: var(--accent); }
.toast.info .toast-icon { background: var(--accent-soft); color: var(--accent); }
@keyframes toastIn {
  from { transform: translateY(14px) scale(0.96); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes slideIn {
  from { transform: translateX(100px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOut {
  to { transform: translateY(14px) scale(0.96); opacity: 0; }
}
@media (max-width: 560px) {
  #toast-container { right: 12px; left: 12px; bottom: 88px; align-items: stretch; }
  .toast { max-width: none; }
}

/* ================================================================
   LOADING / EMPTY STATES
   ================================================================ */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
/* Empty states */
.empty-state .empty-icon { font-size: 36px; margin-bottom: var(--sp-3); opacity: 0.4; }
.empty-state .empty-icon svg { width: 44px; height: 44px; stroke-width: 1.4; }
/* SVG sizing for icon containers that previously held emoji glyphs */
.sub-tour-feature-icon { color: var(--accent); }
.sub-tour-feature-icon svg { width: 40px; height: 40px; }
.maintenance-icon { color: var(--accent); }
.maintenance-icon svg { width: 40px; height: 40px; }
.plans-hero-icon { color: var(--accent); }
.plans-hero-icon svg { width: 38px; height: 38px; }
.upgrade-prompt-icon { color: var(--accent); }
.upgrade-prompt-icon svg { width: 24px; height: 24px; }
.clip-card-play svg { width: 18px; height: 18px; }
.gc-cover-placeholder svg { width: 38px; height: 38px; color: var(--accent); }
.search-game-cover-placeholder svg { width: 24px; height: 24px; }
.trending-game-icon svg { color: var(--text-secondary); }
/* Inline status dot (replaces 🟢 / ⚫ glyphs) */
.status-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-muted); margin-right: 6px; vertical-align: middle;
}
.status-dot.online { background: var(--accent-green); }
/* Small inline icons used in meta rows / cards */
.i-inline { width: 13px; height: 13px; vertical-align: -2px; }
.analytics-card-icon svg { width: 22px; height: 22px; }
.empty-state p { font-size: var(--text-md); font-weight: 600; margin-bottom: var(--sp-1); color: var(--text-secondary); }
.empty-state span { font-size: var(--text-base); color: var(--text-muted); line-height: 1.5; max-width: 280px; margin: 0 auto; }
.empty-state .btn { margin-top: var(--sp-4); }

/* Skeleton loading system */
.skeleton {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-hover) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
.skeleton-text { height: 12px; border-radius: var(--radius-xs); margin-bottom: var(--sp-2); }
.skeleton-text.w-75 { width: 75%; }
.skeleton-text.w-50 { width: 50%; }
.skeleton-text.w-30 { width: 30%; }
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.skeleton-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--card-radius); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.skeleton-card-header { display: flex; align-items: center; gap: var(--sp-3); }
.skeleton-card-body { display: flex; flex-direction: column; gap: var(--sp-2); }
.skeleton-card-image { width: 100%; height: 200px; border-radius: var(--radius-sm); }
.skeleton-card-actions { display: flex; gap: var(--sp-4); padding-top: var(--sp-2); }
.skeleton-card-actions .skeleton { width: 60px; height: 14px; }
.skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-4); }
.skeleton-grid-item { height: 240px; border-radius: var(--card-radius); }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ================================================================
   MISC UTILITY
   ================================================================ */
.divider { height: 1px; background: rgba(255,255,255,0.04); margin: 8px 0; }
.text-accent { color: var(--accent); }
.text-muted { color: var(--text-muted); }
.text-green { color: var(--accent-green); }
.text-gold { color: var(--accent-gold); }
.flex { display: flex; }
.gap-8 { gap: var(--sp-2); }
.items-center { align-items: center; }

/* Glow effects for special elements */
.glow-purple { box-shadow: none; }
.glow-blue   { box-shadow: none; }
.glow-green  { box-shadow: none; }
.glow-gold   { box-shadow: none; }

/* Responsive */
@media (max-width: 1200px) {
  :root { --right-w: 0px; }
  #right-sidebar { display: none; }
  #app { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); gap: 20px; padding: 0 20px; }
}
@media (max-width: 860px) {
  :root { --sidebar-w: 72px; }
  .sidebar-logo { justify-content: center; padding: 10px 0 16px; }
  .logo-img { width: 44px; height: 44px; }
  .beta-badge { display: none; }
  .nav-item span, .btn-post span, .user-info-sm,
  .nav-group-toggle span, .nav-group-chevron { display: none; }
  .nav-group-items { padding-left: 0; }
  .btn-post { padding: 12px; width: 44px; height: 44px; border-radius: 50%; justify-content: center; }
  .sidebar-user-card { justify-content: center; }
  .user-online-dot { display: none; }
  .nav-item { justify-content: center; padding: 12px; }
  #app { gap: 0; padding: 0; }
  #main-content { border-left: none; }
}
@media (max-width: 560px) {
  :root { --sidebar-w: 0px; }
  #sidebar { display: none; }
  #app { grid-template-columns: 1fr; gap: 0; padding: 0; }
  #main-content { border-right: none; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   AUTH MODAL
   ================================================================ */
.auth-overlay {
  position: fixed;
  inset: 0;
  background: #060708;
  z-index: var(--z-top);
  display: block;
  overflow-y: auto;
  padding: 0;
}

/* ================================================================
   DXED LANDING / SIGN-UP — charcoal black identity (full-screen)
   ================================================================ */
:root {
  --dxl-bg:        #08080d;
  --dxl-surface:   #101010;
  --dxl-raised:    #161616;
  --dxl-raised-2:  #1c1c1c;
  --dxl-border:    #262626;
  --dxl-border-2:  #2e2e2e;
  --dxl-text:      #f4f4f4;
  --dxl-sec:       #a1a1a1;
  --dxl-muted:     #6f6f6f;
  /* gutter centers inner content at a max width while bars stay full-bleed */
  --dxl-maxw:      1240px;
  --dxl-gut:       max(24px, calc((100% - var(--dxl-maxw)) / 2));
}

.auth-overlay { background: var(--dxl-bg); padding: 0; }

/* The landing fills the entire viewport — NOT a boxed mockup. Its cinematic
   background poster lives in .landing-photo-bg (defined below). */
.auth-landing.dxl {
  position: relative; display: block; flex: none;
  /* #auth-modal is a flex container (inline display:flex); without this the
     landing gets stretched to the modal's fixed viewport height, so its content
     overflows the box and the sticky nav can only stick for one screen. */
  align-self: flex-start;
  width: 100%; max-width: none; min-height: 100vh; height: auto; margin: 0;
  overflow: visible; border: none; border-radius: 0; box-shadow: none;
  background-color: #08080d;
  isolation: isolate;                 /* keep the bg/overlay/content layering self-contained */
  font-family: var(--font-sans, system-ui, sans-serif);
  color: var(--dxl-text);
}

/* ================================================================
   Cinematic background SLIDESHOW (shared by landing + home).
   One fixed container holds a horizontal track of full-viewport, zoomed-in
   photos. The track slides sideways through each image and loops seamlessly
   (a duplicate of the first slide sits at the end). A charcoal overlay keeps
   content readable. Darkness differs per context (landing vs home).
   ================================================================ */
.bg-slides {
  position: absolute; inset: 0;
  display: flex; width: 500%; height: 100%;   /* 5 slides (4 photos + dup) */
  will-change: transform;
  animation: dxlSlideShow 44s ease-in-out infinite;
}
.bg-slide { flex: 0 0 20%; height: 100%; overflow: hidden; }
.bg-slide img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center;
  transform: scale(1.18);                      /* zoomed in */
}
@keyframes dxlSlideShow {
  0%, 20%   { transform: translateX(0); }
  25%, 45%  { transform: translateX(-20%); }
  50%, 70%  { transform: translateX(-40%); }
  75%, 95%  { transform: translateX(-60%); }
  100%      { transform: translateX(-80%); }   /* duplicate of slide 1 → seamless loop */
}

/* ---- landing: more visible ---- */
.landing-photo-bg {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: #08080d;
}
.landing-photo-bg .bg-slide img { opacity: 0.6; filter: blur(1.5px); }
/* flat charcoal overlay keeps the hero copy + sign-up card readable */
.landing-photo-overlay {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to right, rgba(8,8,13,0.95), rgba(8,8,13,0.74), rgba(8,8,13,0.93)),
    linear-gradient(to bottom, rgba(8,8,13,0.66), rgba(8,8,13,0.95));
}
/* very faint noise texture */
.dxl-grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.03;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.dxl-nav, .dxl-hero, .dxl-section, .dxl-showcase, .dxl-trust { position: relative; z-index: 2; }

/* ---- NAV (full-bleed bar, gutter-aligned content) ---- */
.dxl-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--dxl-gut);
  border-bottom: 1px solid var(--dxl-border);
  background: rgba(10,10,10,0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: sticky; top: 0;
  /* Above the sibling sections (which also use z-index:2) so the sticky bar
     stays on top instead of being painted over as content scrolls under it. */
  z-index: 20;
}
.dxl-brand { display: flex; align-items: center; gap: 11px; cursor: pointer; }
.dxl-logo { width: 30px; height: 30px; border-radius: 8px; object-fit: cover;
  box-shadow: 0 0 0 1px var(--dxl-border); }
.dxl-word { font-size: 20px; font-weight: 800; letter-spacing: 0.14em; color: var(--dxl-text); }
.dxl-links { display: flex; align-items: center; gap: 4px; }
.dxl-link {
  padding: 7px 13px; border-radius: 9px; font-size: 14px; font-weight: 500;
  color: var(--dxl-sec); cursor: pointer; transition: color .15s, background .15s; user-select: none;
}
.dxl-link:hover { color: var(--dxl-text); background: rgba(255,255,255,0.04); }
.dxl-link.active { color: var(--dxl-text); }
.dxl-actions { display: flex; align-items: center; gap: 10px; }
.dxl-signin {
  background: none; border: none; color: var(--dxl-sec); font-size: 14px; font-weight: 600;
  padding: 8px 12px; cursor: pointer; border-radius: 9px; transition: color .15s;
}
.dxl-signin:hover { color: var(--dxl-text); }
.dxl-getstarted {
  background: #f5f3ea; color: #050509; border: 1px solid rgba(245,243,234,0.12);
  font-size: 14px; font-weight: 700;
  padding: 9px 18px; border-radius: 10px; cursor: pointer; transition: background .15s;
  box-shadow: none;
}
.dxl-getstarted:hover { background: #ffffff; box-shadow: none; }

/* ---- HERO (full-bleed section, gutter-aligned 12-col grid) ---- */
.dxl-hero {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, 0.9fr); gap: 56px;
  align-items: center;
  padding: clamp(48px, 8vh, 96px) var(--dxl-gut) clamp(56px, 9vh, 104px);
  min-height: calc(100vh - 60px);
}
.dxl-hero-left { min-width: 0; }
.dxl-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--dxl-sec);
  background: var(--dxl-raised); border: 1px solid var(--dxl-border);
  padding: 6px 12px; border-radius: 999px; margin-bottom: 22px;
}
.dxl-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #d6d6d6; }
.dxl-headline {
  margin: 0 0 20px; font-size: clamp(46px, 5.2vw, 74px); line-height: 0.97; font-weight: 800;
  letter-spacing: -0.028em; color: #f5f3ea;
  text-shadow: 0 2px 18px rgba(5,5,9,0.6);
}
.dxl-subhead {
  margin: 0 0 28px; max-width: 480px; font-size: 16px; line-height: 1.6; color: rgba(245,243,234,0.68);
}
.dxl-cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }
.dxl-cta {
  background: #f5f3ea; color: #050509;
  border: 1px solid rgba(245,243,234,0.12); font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  padding: 14px 26px; border-radius: 12px; cursor: pointer;
  box-shadow: none;
  transition: background .15s, transform .12s;
}
.dxl-cta:hover { background: #ffffff; transform: translateY(-1px); box-shadow: none; }
.dxl-cta-note { font-size: 13px; color: var(--dxl-muted); }

.dxl-values {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  font-size: 12.5px; font-weight: 500; color: var(--dxl-muted); margin-bottom: 36px;
}
.dxl-values i { width: 3px; height: 3px; border-radius: 50%; background: #3a3a3a; }

/* ---- SHOWCASE SECTION (full-bleed, gutter-aligned) ---- */
.dxl-showcase {
  padding: clamp(40px, 7vh, 88px) var(--dxl-gut) clamp(48px, 8vh, 96px);
  border-top: 1px solid var(--dxl-border);
  background: linear-gradient(180deg, rgba(255,255,255,0.012), transparent 40%);
}
.dxl-showcase-head { margin-bottom: 28px; }
.dxl-showcase-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dxl-muted); margin-bottom: 10px;
}
.dxl-showcase-title {
  margin: 0; font-size: clamp(26px, 3vw, 40px); font-weight: 800; letter-spacing: -0.02em;
  color: #fbfbfb;
}

/* ---- PRODUCT PREVIEW (real app window) ---- */
.dxl-preview {
  border: 1px solid var(--dxl-border); border-radius: 16px; overflow: hidden;
  background: var(--dxl-surface);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
}
.dxl-pv-bar {
  display: flex; align-items: center; gap: 7px; padding: 11px 14px;
  background: #0d0d0d; border-bottom: 1px solid var(--dxl-border);
}
.dxl-pv-dot { width: 10px; height: 10px; border-radius: 50%; background: #2c2c2c; }
.dxl-pv-url {
  margin-left: 10px; font-size: 11.5px; color: var(--dxl-muted);
  background: #161616; border: 1px solid var(--dxl-border); border-radius: 7px; padding: 3px 12px;
}
.dxl-pv-body { padding: 16px; }
.dxl-pv-compose {
  display: flex; align-items: center; gap: 12px;
  background: var(--dxl-raised); border: 1px solid var(--dxl-border); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 14px;
}
.dxl-pv-me { width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, #2a2a2a, #161616); border: 1px solid var(--dxl-border-2); }
.dxl-pv-cph { flex: 1; font-size: 14px; color: var(--dxl-muted); }
.dxl-pv-post { font-size: 13px; font-weight: 700; color: #0a0a0a;
  background: var(--dxl-text); padding: 7px 16px; border-radius: 9px; }
.dxl-pv-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.dxl-pv-card {
  background: var(--dxl-raised); border: 1px solid var(--dxl-border); border-radius: 12px; padding: 14px;
}
.dxl-pv-wide { grid-column: auto; }
.dxl-pv-ch { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--dxl-muted); margin-bottom: 12px; }
.dxl-pv-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13.5px; }
.dxl-pv-row b { color: var(--dxl-text); font-weight: 600; }
.dxl-pv-tag { margin-left: auto; font-size: 11.5px; color: var(--dxl-muted); }
.dxl-pv-av { width: 24px; height: 24px; border-radius: 50%; flex: none; border: 1px solid var(--dxl-border-2); }
.dxl-pv-av.a1 { background: linear-gradient(135deg, #3a3a3a, #1d1d1d); }
.dxl-pv-av.a2 { background: linear-gradient(135deg, #4a4a4a, #262626); }
.dxl-pv-join {
  margin-top: 4px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--dxl-text);
  border: 1px solid var(--dxl-border-2); border-radius: 9px; padding: 8px;
}
.dxl-pv-clip {
  position: relative; height: 78px; border-radius: 10px; margin-bottom: 10px;
  background:
    radial-gradient(120% 120% at 30% 20%, #232323, #0e0e0e 70%);
  border: 1px solid var(--dxl-border);
  display: flex; align-items: center; justify-content: center;
}
.dxl-pv-play {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.9); color: #0a0a0a;
}
.dxl-pv-cliprow { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.dxl-pv-cliprow b { color: var(--dxl-text); font-weight: 600; }
.dxl-pv-cliprow span { font-size: 11.5px; color: var(--dxl-muted); }
.dxl-pv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dxl-pv-chip {
  font-size: 12.5px; color: var(--dxl-sec);
  background: var(--dxl-raised-2); border: 1px solid var(--dxl-border); border-radius: 8px; padding: 6px 12px;
}

/* ---- SIGN-UP CARD ---- */
.dxl-hero-right { position: relative; display: flex; justify-content: flex-end; }
.dxl-card {
  width: 100%; max-width: 440px;
  background: rgba(10,10,16,0.86);
  border: 1px solid rgba(245,243,234,0.08); border-radius: 18px;
  padding: 28px 26px 24px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.dxl-card-title { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; color: var(--dxl-text); }
.dxl-card-sub { font-size: 13.5px; color: var(--dxl-sec); margin: 6px 0 20px; line-height: 1.5; }

.dxl-form { display: flex; flex-direction: column; gap: 13px; }
.dxl-form .oauth-buttons { display: flex; flex-direction: column; gap: 9px; margin: 0; }
.dxl-form .oauth-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--dxl-raised); border: 1px solid var(--dxl-border-2); color: var(--dxl-text);
  font-size: 14px; font-weight: 600; padding: 11px; border-radius: 11px; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.dxl-form .oauth-btn:hover { background: var(--dxl-raised-2); border-color: #3a3a3a; }
.dxl-form .auth-divider {
  display: flex; align-items: center; gap: 12px; color: var(--dxl-muted);
  font-size: 11.5px; margin: 3px 0;
}
.dxl-form .auth-divider::before, .dxl-form .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--dxl-border);
}
.dxl-form .auth-field { display: flex; flex-direction: column; gap: 6px; }
.dxl-form .auth-field label { font-size: 12px; font-weight: 600; color: var(--dxl-sec); }
.dxl-form .auth-field input, .dxl-form .auth-field select {
  background: #0d0d0d; border: 1px solid var(--dxl-border); border-radius: 10px;
  padding: 11px 13px; font-size: 14px; color: var(--dxl-text); width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.dxl-form .auth-field input::placeholder { color: #545454; }
.dxl-form .auth-field input:focus, .dxl-form .auth-field select:focus {
  outline: none; border-color: #4a4a4a; box-shadow: 0 0 0 3px rgba(255,255,255,0.05);
}
.dxl-form .auth-row { display: flex; gap: 10px; }
.dxl-form .auth-row .auth-field { flex: 1; }
.dxl-more { margin: 2px 0; }
.dxl-more > summary {
  list-style: none; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--dxl-sec);
  padding: 4px 0;
}
.dxl-more > summary::-webkit-details-marker { display: none; }
.dxl-more > summary::before { content: '+ '; color: var(--dxl-muted); }
.dxl-more[open] > summary::before { content: '– '; }
.dxl-more > summary:hover { color: var(--dxl-text); }
.dxl-more .auth-field { margin-top: 11px; }
.dxl-form .auth-checkbox-field { display: flex; }
.dxl-form .auth-checkbox-label {
  display: flex; align-items: flex-start; gap: 9px; font-size: 12px; line-height: 1.5; color: var(--dxl-muted);
}
.dxl-form .auth-checkbox-label input { margin-top: 2px; accent-color: #d6d6d6; }
.dxl-form .auth-checkbox-label a { color: var(--dxl-sec); text-decoration: underline; }
.dxl-form .auth-error {
  background: rgba(220,80,80,0.1); border: 1px solid rgba(220,80,80,0.3); color: #f0a0a0;
  font-size: 13px; padding: 10px 12px; border-radius: 10px;
}
.dxl-submit {
  background: #f5f3ea; color: #050509;
  border: 1px solid rgba(245,243,234,0.12); font-size: 15px; font-weight: 700; padding: 13px; border-radius: 11px; cursor: pointer;
  box-shadow: none; transition: background .15s;
  margin-top: 3px;
}
.dxl-submit:hover { background: #ffffff; box-shadow: none; }
.dxl-card-foot { text-align: center; font-size: 13px; color: var(--dxl-muted); margin-top: 4px; }
.dxl-card-foot a { color: var(--dxl-text); font-weight: 600; cursor: pointer; }
.dxl-card-foot a:hover { text-decoration: underline; }
.dxl-guest {
  display: block; width: 100%; margin-top: 14px; padding-top: 14px;
  border: none; border-top: 1px solid var(--dxl-border); background: none;
  color: var(--dxl-muted); font-size: 13px; font-weight: 500; cursor: pointer; transition: color .15s;
}
.dxl-guest:hover { color: var(--dxl-sec); }

/* ---- VALUE ROW ---- */
.dxl-trust {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px;
  padding: 26px var(--dxl-gut); border-top: 1px solid var(--dxl-border);
  font-size: 13px; font-weight: 500; color: var(--dxl-muted);
}
.dxl-trust i { width: 3px; height: 3px; border-radius: 50%; background: #3a3a3a; }
.dxl-trust-tag { color: var(--dxl-sec); font-weight: 600; }

/* ================================================================
   LANDING EXAMPLE SECTIONS (Features / Communities / Clips / Pricing)
   ================================================================ */
.dxl-section {
  padding: clamp(56px, 9vh, 104px) var(--dxl-gut);
  border-top: 1px solid var(--dxl-border);
  scroll-margin-top: 70px;
}
.dxl-section:nth-of-type(even) { background: linear-gradient(180deg, rgba(255,255,255,0.012), transparent 45%); }
.dxl-sec-head { max-width: 640px; margin-bottom: 36px; }
.dxl-sec-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dxl-muted); margin-bottom: 12px;
}
.dxl-sec-title {
  margin: 0 0 14px; font-size: clamp(28px, 3.4vw, 44px); font-weight: 800;
  letter-spacing: -0.025em; color: #f5f3ea; line-height: 1.04;
  text-shadow: 0 2px 16px rgba(5,5,9,0.55);
}
.dxl-sec-sub { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--dxl-sec);
  text-shadow: 0 1px 16px rgba(5,5,9,0.7); }

/* media inside previews is display-only — never pressable */
.dxl-preview, .dxl-preview *, .dxl-comm-card, .dxl-comm-card *,
.dxl-clip-card, .dxl-clip-card * { pointer-events: none !important; }
.dxl-clip-media video, .dxl-pv-clip video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.dxl-pv-clip { position: relative; overflow: hidden; }
.dxl-pv-clip .dxl-pv-play { position: relative; z-index: 1; }

/* Features layout */
.dxl-feat-layout {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: center;
}
.dxl-feat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.dxl-feat-list li { display: flex; gap: 14px; align-items: flex-start; }
.dxl-feat-ic {
  flex: none; width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  background: var(--dxl-raised); border: 1px solid var(--dxl-border-2); color: var(--dxl-text);
}
.dxl-feat-list b { display: block; font-size: 15px; font-weight: 700; color: var(--dxl-text); margin-bottom: 3px; }
.dxl-feat-list span { font-size: 13.5px; line-height: 1.5; color: var(--dxl-sec); }
.dxl-pv-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }

/* Communities grid */
.dxl-comm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dxl-comm-card {
  background: var(--dxl-raised); border: 1px solid var(--dxl-border); border-radius: 14px; padding: 18px;
  display: flex; flex-direction: column; gap: 18px;
}
.dxl-comm-top { display: flex; align-items: center; gap: 13px; }
.dxl-comm-ic {
  flex: none; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; color: var(--dxl-text);
  background: linear-gradient(135deg, #242424, #161616); border: 1px solid var(--dxl-border-2);
}
.dxl-comm-name { font-size: 15.5px; font-weight: 700; color: var(--dxl-text); display: flex; flex-direction: column; gap: 3px; }
.dxl-comm-name span { font-size: 12.5px; font-weight: 500; color: var(--dxl-muted); }
.dxl-comm-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.dxl-stack { display: flex; align-items: center; }
.dxl-stack-av {
  width: 26px; height: 26px; border-radius: 50%; margin-left: -8px; flex: none;
  border: 2px solid #161616; background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #ddd;
}
.dxl-stack-av:first-child { margin-left: 0; }
.dxl-stack-more { margin-left: 8px; font-size: 12px; color: var(--dxl-muted); font-weight: 600; }
.dxl-comm-join {
  font-size: 12.5px; font-weight: 700; color: var(--dxl-text);
  border: 1px solid var(--dxl-border-2); border-radius: 9px; padding: 7px 16px;
}

/* Clips strip */
.dxl-clip-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.dxl-clip-card {
  background: var(--dxl-raised); border: 1px solid var(--dxl-border); border-radius: 14px; overflow: hidden;
}
.dxl-clip-media {
  position: relative; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 120% at 30% 20%, #232323, #0e0e0e 70%);
  border-bottom: 1px solid var(--dxl-border);
}
.dxl-clip-media .dxl-pv-play { position: relative; z-index: 1; }
.dxl-clip-foot { display: flex; align-items: center; gap: 10px; padding: 12px 13px; }
.dxl-clip-av {
  width: 28px; height: 28px; border-radius: 50%; flex: none; background-size: cover; background-position: center;
  border: 1px solid var(--dxl-border-2);
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #ddd;
}
.dxl-clip-meta { min-width: 0; }
.dxl-clip-meta b { display: block; font-size: 13px; font-weight: 600; color: var(--dxl-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dxl-clip-meta span { font-size: 12px; color: var(--dxl-muted); }

/* Crypto Games catalog */
.dxl-cg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.dxl-cg-card {
  background: var(--dxl-raised); border: 1px solid var(--dxl-border); border-radius: 14px; overflow: hidden;
}
.dxl-cg-banner {
  height: 92px; background-size: cover; background-position: center;
  background-color: #141414; border-bottom: 1px solid var(--dxl-border);
}
.dxl-cg-info { display: flex; align-items: center; gap: 11px; padding: 12px 13px; }
.dxl-cg-logo {
  width: 34px; height: 34px; border-radius: 9px; flex: none; margin-top: -30px;
  border: 2px solid #161616; background-color: #222; background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #eee;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.dxl-cg-name { min-width: 0; flex: 1; }
.dxl-cg-name b { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--dxl-text); }
.dxl-cg-nm { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dxl-cg-name span { display: block; font-size: 11.5px; color: var(--dxl-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dxl-cg-check { flex: none; color: #d6d6d6; }
.dxl-cg-chain {
  flex: none; font-size: 10.5px; font-weight: 600; color: var(--dxl-sec);
  background: var(--dxl-raised-2); border: 1px solid var(--dxl-border); border-radius: 7px; padding: 3px 8px;
  white-space: nowrap;
}
/* On narrow widths the cards go 2-up and the row (logo + name + chain pill) no
   longer fits — the chain badge collided with a hard-truncated game name. Lift
   the chain onto the banner's top-right corner so the name row gets full width. */
@media (max-width: 720px) {
  .dxl-cg-card { position: relative; }
  .dxl-cg-chain {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    color: var(--dxl-text);
    background: rgba(8,8,13,0.72);
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  }
}

/* Pricing */
.dxl-price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 420px)); gap: 20px; }
.dxl-price-card {
  position: relative; background: var(--dxl-raised); border: 1px solid var(--dxl-border); border-radius: 18px;
  padding: 28px 26px; display: flex; flex-direction: column;
}
.dxl-price-card.featured { border-color: var(--dxl-border-2); background: #161620;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45); }
.dxl-price-badge {
  position: absolute; top: 18px; right: 18px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  color: #0a0a0a; background: var(--dxl-text); padding: 4px 10px; border-radius: 999px;
}
.dxl-price-name { font-size: 14px; font-weight: 700; color: var(--dxl-sec); margin-bottom: 8px; }
.dxl-price-amt { font-size: 34px; font-weight: 800; color: #fbfbfb; letter-spacing: -0.02em; margin-bottom: 22px; }
.dxl-price-amt span { font-size: 14px; font-weight: 600; color: var(--dxl-muted); margin-left: 4px; }
.dxl-price-feats { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.dxl-price-feats li { position: relative; padding-left: 26px; font-size: 14px; color: var(--dxl-sec); }
.dxl-price-feats li::before {
  content: ''; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: #1f1f1f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23d6d6d6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 10px no-repeat;
  border: 1px solid var(--dxl-border-2);
}
.dxl-price-btn {
  margin-top: auto; padding: 12px; border-radius: 11px; font-size: 14.5px; font-weight: 700; cursor: pointer;
  background: #f5f3ea; color: #050509; border: 1px solid rgba(245,243,234,0.12);
  box-shadow: none; transition: background .15s;
}
.dxl-price-btn:hover { background: #ffffff; }
.dxl-price-btn.ghost { background: var(--dxl-raised); color: var(--dxl-text); border: 1px solid var(--dxl-border-2); box-shadow: none; }

/* ---- Landing → Roadmap CTA card ---- */
.dxl-roadmap-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 30px; max-width: 480px;
  background: var(--dxl-raised); border: 1px solid var(--dxl-border-2); border-radius: 14px;
  padding: 14px 16px;
}
.dxl-roadmap-cta-title { font-size: 14.5px; font-weight: 700; color: var(--dxl-text); }
.dxl-roadmap-cta-sub { font-size: 12.5px; color: var(--dxl-sec); margin-top: 2px; }
.dxl-roadmap-cta-btn {
  flex: none; cursor: pointer; font-size: 13px; font-weight: 700; white-space: nowrap;
  color: #050509; background: #f5f3ea; border: 1px solid rgba(245,243,234,0.12);
  padding: 9px 16px; border-radius: 10px; transition: background .15s;
}
.dxl-roadmap-cta-btn:hover { background: #ffffff; }

/* ================================================================
   DXED ROADMAP PAGE (/roadmap) — charcoal, clean, no purple/neon
   ================================================================ */
.rmp {
  position: fixed; inset: 0; z-index: calc(var(--z-top) + 5);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(110% 70% at 80% -5%, rgba(255,255,255,0.035), transparent 55%),
    linear-gradient(180deg, #101013 0%, #0a0a0d 55%, #08080d 100%);
  color: var(--dxl-text);
  font-family: var(--font-sans, system-ui, sans-serif);
}
.rmp-nav {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px max(20px, calc((100% - 1080px) / 2));
  background: rgba(10,10,13,0.72); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--dxl-border);
}
.rmp-brand { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.rmp-logo { width: 28px; height: 28px; border-radius: 7px; object-fit: cover; }
.rmp-word { font-size: 18px; font-weight: 800; letter-spacing: 0.14em; }
.rmp-back {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--dxl-sec);
  background: var(--dxl-raised); border: 1px solid var(--dxl-border-2);
  padding: 8px 14px; border-radius: 10px; transition: color .15s, border-color .15s;
}
.rmp-back:hover { color: var(--dxl-text); border-color: #3a3a3a; }

.rmp-main { max-width: 1080px; margin: 0 auto; padding: clamp(36px, 6vh, 64px) max(20px, 4vw) 80px; }
.rmp-head { max-width: 720px; margin-bottom: 40px; }
.rmp-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dxl-muted); margin-bottom: 12px;
}
.rmp-title { margin: 0 0 12px; font-size: clamp(32px, 5vw, 52px); font-weight: 800; letter-spacing: -0.028em; color: #f5f3ea; line-height: 1.02; }
.rmp-subtitle { margin: 0 0 16px; font-size: clamp(16px, 2.2vw, 19px); font-weight: 600; color: var(--dxl-text); }
.rmp-desc { margin: 0 0 18px; font-size: 15.5px; line-height: 1.65; color: var(--dxl-sec); }
.rmp-disclaimer {
  font-size: 13px; line-height: 1.6; color: var(--dxl-muted);
  background: var(--dxl-raised); border: 1px solid var(--dxl-border); border-radius: 12px;
  padding: 13px 15px;
}

.rmp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.rmp-card {
  background: var(--dxl-raised); border: 1px solid var(--dxl-border); border-radius: 16px;
  padding: 20px; transition: border-color .15s, transform .15s, background .15s;
}
.rmp-card:hover { border-color: var(--dxl-border-2); background: var(--dxl-raised-2); transform: translateY(-2px); }
.rmp-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.rmp-num { font-size: 14px; font-weight: 800; color: var(--dxl-muted); letter-spacing: 0.04em; }
.rmp-tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--dxl-border-2);
}
.rmp-tag.planned   { color: #d8d8d8; background: rgba(255,255,255,0.06); }
.rmp-tag.exploring { color: var(--dxl-muted); background: rgba(255,255,255,0.02); }
.rmp-card-title { margin: 0 0 7px; font-size: 16.5px; font-weight: 700; color: var(--dxl-text); letter-spacing: -0.01em; }
.rmp-card-desc { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--dxl-sec); }

.rmp-vision {
  margin-top: 48px; padding: clamp(24px, 4vw, 40px);
  background: linear-gradient(180deg, #16161a, #111114);
  border: 1px solid var(--dxl-border-2); border-radius: 20px;
}
.rmp-vision-title { margin: 0 0 12px; font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -0.02em; color: #f5f3ea; }
.rmp-vision-lead { margin: 0 0 20px; font-size: 16px; line-height: 1.6; color: var(--dxl-sec); }
.rmp-vision-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.rmp-vision-chips span {
  font-size: 13px; font-weight: 600; color: var(--dxl-text);
  background: var(--dxl-raised); border: 1px solid var(--dxl-border); border-radius: 999px; padding: 8px 14px;
}
.rmp-vision-close { margin: 0; font-size: 15px; line-height: 1.7; color: var(--dxl-sec); }

.rmp-foot { margin-top: 36px; text-align: center; }
.rmp-foot-btn {
  cursor: pointer; font-size: 14.5px; font-weight: 700; color: #050509;
  background: #f5f3ea; border: 1px solid rgba(245,243,234,0.12); padding: 12px 28px; border-radius: 12px;
  transition: background .15s;
}
.rmp-foot-btn:hover { background: #ffffff; }

@media (max-width: 720px) {
  .rmp-grid { grid-template-columns: 1fr; }
  .dxl-roadmap-cta { flex-direction: column; align-items: stretch; text-align: left; }
  .dxl-roadmap-cta-btn { width: 100%; }
}

/* ---- RESPONSIVE ---- */
@media (max-width: 980px) {
  /* mobile: darker, less distracting background so the form stays readable */
  .landing-photo-row img { opacity: 0.38; filter: blur(2.5px); }
  .landing-photo-overlay {
    background:
      linear-gradient(to bottom, rgba(8,8,13,0.82), rgba(8,8,13,0.96)),
      linear-gradient(to right, rgba(8,8,13,0.95), rgba(8,8,13,0.78));
  }
  .dxl-hero {
    grid-template-columns: 1fr; gap: 36px;
    min-height: 0; align-items: stretch;
    padding-top: clamp(32px, 6vh, 56px); padding-bottom: clamp(40px, 7vh, 64px);
  }
  .dxl-hero-right { justify-content: stretch; }
  .dxl-card { max-width: 520px; margin: 0 auto; }
  .dxl-links { display: none; }
  .dxl-pv-grid { grid-template-columns: 1fr 1fr; }
  .dxl-feat-layout { grid-template-columns: 1fr; gap: 32px; }
  .dxl-comm-grid { grid-template-columns: repeat(2, 1fr); }
  .dxl-clip-strip { grid-template-columns: repeat(2, 1fr); }
  .dxl-cg-grid { grid-template-columns: repeat(3, 1fr); }
  .dxl-price-grid { grid-template-columns: 1fr; max-width: 460px; }
}
@media (max-width: 720px) {
  .dxl-cg-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .dxl-pv-grid { grid-template-columns: 1fr; }
  .dxl-getstarted { padding: 8px 14px; }
  .dxl-cta-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .dxl-values { font-size: 12px; }
  .dxl-comm-grid { grid-template-columns: 1fr; }
  .dxl-clip-strip { grid-template-columns: 1fr; }
  .dxl-cg-grid { grid-template-columns: 1fr 1fr; }
}

/* Landing = slideshow + auth side-by-side */
.auth-landing {
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 860px;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.06);
}

/* SLIDESHOW PANEL (left side) */
.auth-slideshow {
  flex: 1;
  background: linear-gradient(160deg, var(--bg-secondary), var(--bg-primary));
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 48px 36px 32px;
  position: relative;
  overflow: hidden;
  min-height: 480px;
}
.auth-slideshow::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, var(--accent-soft) 0%, transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.03) 0%, transparent 55%);
  pointer-events: none;
}

.auth-slides-track {
  position: relative;
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.auth-slide {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 24px;
  transition: transform 0.5s cubic-bezier(.4,0,.2,1), opacity 0.5s ease;
  will-change: transform, opacity;
}

.auth-slide-icon {
  margin-bottom: 24px;
  animation: slideIconFloat 3s ease-in-out infinite alternate;
}
@keyframes slideIconFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-6px); }
}

.auth-slide-title {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 12px;
  letter-spacing: -0.3px;
  line-height: 1.2;
}
.auth-slide-desc {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
  margin: 0;
  max-width: 300px;
}

/* Dots */
.auth-slide-dots {
  display: flex; gap: var(--sp-2);
  margin-top: 24px;
  position: relative; z-index: 2;
}
.auth-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}
.auth-dot.active {
  background: var(--accent);
  width: 24px;
  border-radius: var(--radius-xs);
  box-shadow: 0 0 8px rgba(122,126,140,0.5);
}
.auth-dot:hover { background: rgba(255,255,255,0.4); }
.auth-dot.active:hover { background: var(--accent-light); }

/* Tagline at bottom of slideshow */
.auth-slide-tagline {
  margin-top: 20px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.7;
  position: relative; z-index: 2;
}

/* AUTH BOX (right side) */
.auth-box {
  background: #111122;
  width: 400px;
  min-width: 360px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 90vh;
}
.auth-box-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 24px 8px;
  justify-content: center;
}
.auth-logo-img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  color: #fff;
  display: block;
}

/* Mobile: stack vertically, compact slideshow */
@media (max-width: 768px) {
  .auth-overlay {
    padding: 0;
    align-items: stretch;
  }
  /* Legacy slideshow/auth-box layout only — NOT the .dxl landing. Capping the
     dxl landing at 100vh here made its content overflow the box, which limited
     the sticky nav to a single screen so it scrolled away. */
  .auth-landing:not(.dxl) {
    flex-direction: column;
    max-width: 100%;
    max-height: 100vh;
    height: 100vh;
    overflow-y: auto;
    border-radius: 0;
    -webkit-overflow-scrolling: touch;
  }
  .auth-slideshow {
    min-height: 160px;
    max-height: 180px;
    padding: 24px 20px 14px;
    flex-shrink: 0;
  }
  .auth-slides-track { min-height: 80px; }
  .auth-slide { padding: 12px; }
  .auth-slide-title { font-size: 17px; margin-bottom: 6px; }
  .auth-slide-desc { font-size: 12px; max-width: 260px; }
  .auth-slide-icon svg { width: 36px; height: 36px; }
  .auth-slide-icon { margin-bottom: 10px; }
  .auth-slide-dots { margin-top: 10px; }
  .auth-slide-tagline { margin-top: 8px; font-size: 9px; }
  .auth-box {
    width: 100%;
    min-width: unset;
    max-height: unset;
    flex: 1;
  }
  .auth-form {
    padding: 16px 20px 24px;
    gap: var(--sp-3);
  }
  .auth-field input,
  .auth-field select {
    font-size: 16px; /* prevents iOS zoom on focus */
    padding: 12px 13px;
  }
  .oauth-btn {
    padding: 12px 16px;
  }
  .auth-submit {
    padding: 14px;
    font-size: 16px;
  }
}

/* Very small screens: hide slideshow entirely */
@media (max-width: 480px) {
  .auth-slideshow {
    display: none;
  }
  .auth-landing {
    border-radius: 0;
  }
  .auth-box {
    border-radius: 0;
  }
  .auth-box-logo {
    padding: 24px 20px 12px;
  }
  .auth-form {
    padding: 14px 16px calc(28px + env(safe-area-inset-bottom, 0px));
  }
  .auth-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .auth-tabs {
    padding: 8px 16px;
  }
}
.auth-tabs {
  display: flex;
  gap: var(--sp-1);
  padding: 8px 24px;
  border-bottom: 1px solid var(--border);
}
.auth-tab-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
}
.auth-tab-btn:hover { color: var(--text-primary); background: var(--bg-card-hover); }
.auth-tab-btn.active { color: var(--accent); background: var(--accent-soft); }
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 24px 24px;
}
.auth-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.auth-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}
.auth-field input,
.auth-field select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--input-radius);
  color: var(--text-primary);
  font-size: 14px;
  height: var(--input-height);
  padding: 0 var(--sp-3);
  outline: none;
  transition: border-color var(--transition);
  font-family: inherit;
  width: 100%;
  cursor: text;
  -webkit-user-select: text;
  user-select: text;
}
.auth-field input:focus,
.auth-field select:focus {
  border-color: var(--accent);
}
.auth-field input::placeholder { color: var(--text-muted); }
.auth-field select { cursor: pointer; }
.auth-field select option { background: var(--bg-card); }
.auth-field input[type="date"] { color-scheme: dark; }
.auth-checkbox-field { margin: 4px 0; }
.auth-checkbox-label { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; cursor: pointer; }
.auth-checkbox-label input[type="checkbox"] { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.auth-checkbox-label a { color: var(--accent); text-decoration: none; }
.auth-checkbox-label a:hover { text-decoration: underline; }
.auth-checkbox-label strong { color: var(--text-primary); }
.auth-submit {
  width: 100%;
  justify-content: center;
  padding: 12px;
  margin-top: 4px;
  font-size: 15px;
}
.auth-error {
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.35);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  color: #ef4444;
  font-weight: 600;
}
.auth-demo-hint {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}
.auth-demo-hint code {
  color: var(--accent);
  background: var(--accent-soft);
  padding: 1px 5px;
  border-radius: var(--radius-xs);
}
.auth-optional { color: var(--text-muted); font-weight: 400; text-transform: none; }

/* OAuth Buttons */
.oauth-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
}
.oauth-btn:hover {
  border-color: var(--border-accent);
  background: var(--bg-card-hover);
}
.oauth-btn svg { flex-shrink: 0; }
.oauth-google:hover { border-color: #4285F4; box-shadow: 0 0 0 3px rgba(66,133,244,0.12); }
.oauth-discord:hover { border-color: #5865F2; box-shadow: 0 0 0 3px rgba(88,101,242,0.12); }

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ================================================================
   SIDEBAR USER MENU
   ================================================================ */
.sidebar-user-card {
  cursor: pointer;
  position: relative;
  user-select: none;
}
.sidebar-more-icon {
  margin-left: auto;
  font-size: 18px;
  color: var(--text-muted);
  letter-spacing: 1px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: var(--radius-xs);
  transition: color var(--transition);
}
.sidebar-user-card:hover .sidebar-more-icon { color: var(--text-primary); }

.sidebar-user-menu {
  position: absolute;
  bottom: 72px;
  left: 12px;
  right: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius);
  padding: 6px;
  z-index: var(--z-dropdown);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.5);
}
.sidebar-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  transition: background var(--transition);
}
.sidebar-menu-item svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.sidebar-menu-item:hover { background: var(--bg-hover); }
.sidebar-menu-item.danger { color: var(--accent-red); }
.sidebar-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* ================================================================
   SHARE DROPDOWN
   ================================================================ */
.post-share-wrap, .post-boost-wrap {
  position: relative;
  display: inline-flex;
  flex: 1;
  justify-content: center;
}
.share-dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #151528;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  padding: 4px;
  z-index: var(--z-sticky);
  min-width: 170px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
  white-space: nowrap;
  backdrop-filter: blur(12px);
}
.share-option {
  padding: 9px 14px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  transition: background 0.12s ease;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.share-option:hover { background: rgba(255,255,255,0.06); }

/* ================================================================
   QUOTE POST
   ================================================================ */
/* --- Quote Modal Compose Layout --- */
.modal-compose-area {
  display: flex;
  gap: var(--sp-3);
  padding: 16px 20px 8px;
}
.modal-avatar-wrap { flex-shrink: 0; }
.modal-inputs { flex: 1; min-width: 0; }
.modal-textarea {
  width: 100%;
  min-height: 80px;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.5;
  font-family: inherit;
  padding: 0;
}
.modal-textarea::placeholder { color: var(--text-muted); }

/* --- Quoted Post Preview (inside modal) --- */
.quoted-post-box {
  margin-top: 8px;
}
.quoted-inner {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  background: rgba(255,255,255,0.02);
}
.quoted-user {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.quoted-user strong { font-size: 12px; }
.quoted-user span { font-size: var(--text-xs); }
.quoted-avatar {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; color: #fff;
  flex-shrink: 0;
}
.quoted-body {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.quoted-post-box .quoted-media-img {
  max-height: 120px;
  border-radius: var(--radius-xs);
  object-fit: cover;
}
.quoted-post-box .quoted-media-video {
  max-height: 120px;
  border-radius: var(--radius-xs);
}
.views-btn { pointer-events: none; opacity: 0.5; }

/* Action-specific hover colors */
.post-action-btn.like-btn:hover { background: rgba(244,63,94,0.06); color: #f43f5e; }
.post-action-btn.like-btn:hover svg { stroke: #f43f5e; }
.post-action-btn.comment-btn:hover { background: var(--accent-soft); color: var(--accent-light); }
.post-action-btn.comment-btn:hover svg { stroke: var(--accent-light); }
.post-action-btn.share-btn:hover { background: rgba(34,197,94,0.06); color: #22c55e; }
.post-action-btn.share-btn:hover svg { stroke: #22c55e; }
.post-action-btn.bookmark-btn:hover { background: var(--accent-subtle); color: var(--accent); }
.post-action-btn.bookmark-btn:hover svg { stroke: var(--accent); }

/* ================================================================
   VERIFIED BADGE (Shield System)
   ================================================================ */
/* Legacy compat */
.verified-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff;
  font-size: 9px; font-weight: 900; width: 15px; height: 15px;
  border-radius: 50%; flex-shrink: 0; vertical-align: middle;
  margin-left: 2px; box-shadow: none; opacity: 0.75;
}
.verified-gold { background: var(--accent-gold); box-shadow: none; }
.verified-lg { width: 22px; height: 22px; font-size: 12px; }

/* New shield verification badges */
.vb {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex-shrink: 0; vertical-align: middle;
  margin-left: 1px; cursor: pointer; position: relative;
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), filter 0.2s;
}
.vb:hover { transform: scale(1.2) rotate(-4deg); }
.vb-lg { width: 22px; height: 22px; }
.vb-svg { width: 100%; height: 100%; display: block; }

/* Color variants */
.vb-official  { color: #1D9BF0; filter: none; opacity: 0.7; }
.vb-verified  { color: #7C3AED; filter: none; opacity: 0.7; }
.vb-trusted   { color: #059669; filter: none; opacity: 0.7; }
.vb-gold      { color: #fbbf24; filter: none; opacity: 0.9; }
.vb-premium   { color: #DC2626; filter: none; opacity: 0.7; }
.vb-creator   { color: #DB2777; filter: none; opacity: 0.7; }
.vb-partner   { color: #0891B2; filter: none; opacity: 0.7; }
.vb-staff     { color: #65A30D; filter: none; opacity: 0.7; }
.vb-admin     { color: #9333EA; filter: none; opacity: 0.7; }
.vb-legend    { color: #F59E0B; filter: none; opacity: 0.7; }
.vb-newcomer  { color: #14B8A6; filter: none; opacity: 0.7; }
.vb-elite     { color: #6366F1; filter: none; opacity: 0.7; }
.vb-ownership {
  color: #FFD700;
  filter: none;
  opacity: 0.75;
  animation: none;
}
/* Hover glow boost */
.vb:hover { opacity: 1; }
.vb-partner:hover   { filter: drop-shadow(0 2px 10px rgba(8,145,178,0.5)); }
.vb-staff:hover     { filter: drop-shadow(0 2px 10px rgba(101,163,13,0.5)); }
.vb-admin:hover     { filter: drop-shadow(0 2px 10px rgba(147,51,234,0.5)); }
.vb-legend:hover    { filter: drop-shadow(0 2px 10px rgba(245,158,11,0.5)); }
.vb-newcomer:hover  { filter: drop-shadow(0 2px 10px rgba(20,184,166,0.5)); }
.vb-elite:hover     { filter: drop-shadow(0 2px 10px rgba(122,126,140,0.5)); }
.vb-ownership:hover { filter: drop-shadow(0 3px 14px rgba(255,215,0,0.7)) drop-shadow(0 0 6px rgba(255,215,0,0.3)); }
/* Tooltip on hover */
.vb::after {
  content: attr(title); position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%) scale(0.9); opacity: 0;
  background: rgba(0,0,0,0.85); color: white; font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: var(--radius-xs); white-space: nowrap; pointer-events: none;
  transition: opacity 0.15s, transform 0.15s; z-index: var(--z-sticky);
}
.vb:hover::after { opacity: 1; transform: translateX(-50%) scale(1); }

/* ================================================================
   X-STYLE QUOTED POST CARD (in feed)
   ================================================================ */
.quoted-post-card {
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-top: 8px;
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: background 0.18s ease;
}
.quoted-post-card:hover { background: rgba(255,255,255,0.05); }
.quoted-post-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.quoted-avatar-sm {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #fff;
  flex-shrink: 0;
  background-size: cover; background-position: center;
}
/* Scale avatar frame ring for small quoted avatars */
.quoted-post-header .avatar-frame-animated,
.detail-quoted-header .avatar-frame-animated,
.quoted-user .avatar-frame-animated {
  width: 24px; height: 24px;
  padding: 2px;
  flex-shrink: 0;
}
.quoted-username-sm {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.quoted-handle-sm {
  font-size: 12px;
  color: rgba(255,255,255,0.3);
}
.quoted-time-sm {
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  margin-left: auto;
}
.quoted-body-sm {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.quoted-media { margin-top: 8px; }
.quoted-media-img {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.quoted-media { position: relative; }
.quoted-multi-badge {
  position: absolute; bottom: 8px; right: 8px;
  background: rgba(0,0,0,.7); color: #fff; font-size: 12px; font-weight: 600;
  padding: 2px 8px; border-radius: var(--radius); backdrop-filter: blur(4px);
}
.quoted-media-video {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* Post detail overlay (Twitter-style expanded view) */
.post-detail-overlay {
  position: fixed; inset: 0; z-index: var(--z-top);
  background: rgba(0,0,0,0.75); backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 20px; overflow: hidden;
}
.post-detail-modal {
  background: var(--bg-card); border-radius: var(--radius-md);
  max-width: 600px; width: 100%;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: detailSlideUp 0.2s ease;
}
@keyframes detailSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.post-detail-top-bar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.06);
  position: sticky; top: 0; background: var(--bg-card); z-index: 10;
  border-radius: var(--radius-md) 16px 0 0;
}
.post-detail-back {
  background: none; border: none; color: var(--text-primary); cursor: pointer;
  padding: 4px; border-radius: 50%; transition: background 0.15s;
}
.post-detail-back:hover { background: rgba(255,255,255,0.08); }
.post-detail-title {
  font-size: 17px; font-weight: 700; color: var(--text-primary);
}
.post-detail-content { padding: 16px; }
.post-detail-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.post-detail-body {
  font-size: 15px; line-height: 1.6; color: var(--text-primary);
  margin-bottom: 12px; word-break: break-word;
}
.post-detail-meta {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 12px 0; border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin: 12px 0;
}
.post-detail-time { font-size: 13px; color: var(--text-muted); }
.post-detail-views {
  font-size: 13px; color: var(--text-muted);
  display: flex; align-items: center; gap: var(--sp-1);
}
.post-detail-actions {
  display: flex; align-items: center; gap: 0;
  justify-content: space-around;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.post-detail-actions .post-action-btn { font-size: 14px; }

/* Expanded quoted post inside detail view */
.detail-quoted-card {
  border: none;
  border-radius: var(--radius-sm); padding: 12px 14px;
  margin: 12px 0; cursor: pointer;
  background: rgba(255,255,255,0.03);
  transition: background 0.18s ease;
}
.detail-quoted-card:hover {
  background: rgba(255,255,255,0.05);
}
.detail-quoted-header {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.detail-quoted-body {
  font-size: 14px; line-height: 1.6;
  color: var(--text-secondary); margin-bottom: 10px;
  word-break: break-word;
  /* No line clamp - show full text */
}
.detail-quoted-media { margin-top: 8px; }
.detail-quoted-img {
  width: 100%; border-radius: var(--radius-sm);
  max-height: 400px; object-fit: cover; cursor: pointer;
  margin-bottom: 6px;
}
.detail-quoted-video {
  width: 100%; border-radius: var(--radius-sm);
  max-height: 400px;
}

/* Reply section in detail view */
.post-detail-reply-section {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.post-detail-reply-box {
  display: flex; align-items: center; gap: 10px;
}
.post-detail-reply-input {
  flex: 1; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg); padding: 10px 16px;
  color: var(--text-primary); font-size: 14px;
  outline: none; transition: border-color 0.18s;
}
.post-detail-reply-input:focus {
  border-color: rgba(122,126,140,0.4);
}
.post-detail-reply-input::placeholder { color: var(--text-muted); }
.post-detail-reply-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: none; color: #fff; font-size: 13px; font-weight: 600;
  padding: 10px 20px; border-radius: var(--radius-lg); cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.post-detail-reply-btn:hover { opacity: 0.85; }
.detail-reply-media-btn {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  padding: 6px; border-radius: 50%; display: flex; align-items: center;
  transition: color 0.15s, background 0.15s;
}
.detail-reply-media-btn:hover { color: var(--accent); background: var(--accent-soft); }
.detail-reply-media-preview { padding: 0 0 8px; }
.detail-reply-media-preview .comment-media-thumb { position: relative; display: inline-block; }
.detail-reply-media-preview .comment-media-remove {
  position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,0.7);
  color: #fff; border: none; border-radius: 50%; width: 22px; height: 22px;
  cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center;
}
.post-detail-modal .post-image { max-width: 100%; height: auto; }
.post-detail-comments { padding: 0 16px 16px; }

/* ================================================================
   INLINE COMPOSE FOOTER
   ================================================================ */
#compose-footer {
  margin-top: 4px;
  border-top: none;
  padding-top: 4px;
}
.compose-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#compose-text {
  resize: none;
  transition: height var(--transition);
}

/* ================================================================
   TOURNAMENTS MAINTENANCE SCREEN
   ================================================================ */
.maintenance-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 40px;
  gap: var(--sp-4);
}
.maintenance-icon {
  font-size: 72px;
  animation: spin-slow 4s linear infinite;
}
@keyframes spin-slow {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(15deg); }
  75%  { transform: rotate(-15deg); }
  100% { transform: rotate(0deg); }
}
.maintenance-title {
  font-size: 24px;
  font-weight: 900;
  color: var(--text-primary);
}
.maintenance-desc {
  font-size: 15px;
  color: var(--text-secondary);
  max-width: 440px;
  line-height: 1.6;
}
.maintenance-features {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 8px;
}
.maintenance-feature {
  background: var(--bg-card);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-full);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}
.maintenance-eta {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 8px;
}

/* ================================================================
   STORIES — Instagram-style v2
   ================================================================ */

/* ── Story Creator Overlay ── */
.story-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.88);
  display: flex; align-items: center; justify-content: center;
  z-index: var(--z-overlay);
}
.story-creator-box {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  width: 100%; max-width: 500px;
  border: 1px solid var(--border);
  overflow: hidden;
  max-height: 92vh;
  display: flex; flex-direction: column;
}
.story-creator-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.story-creator-header h3 { font-size: 17px; font-weight: 800; color: var(--text-primary); margin: 0; }
/* Source tabs */
.story-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.story-tab {
  flex: 1; padding: 10px;
  background: none; border: none; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--text-muted);
  transition: color var(--transition), background var(--transition);
}
.story-tab.active { color: var(--accent); border-bottom: 2px solid var(--accent); }
.story-tab:hover { background: var(--bg-secondary); }
/* Panel */
.story-panel { padding: 16px; overflow-y: auto; }
/* Upload zone */
.story-upload-zone {
  background: var(--bg-secondary);
  border: 2px dashed var(--border-accent);
  border-radius: var(--radius); min-height: 220px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  position: relative; overflow: hidden;
}
.story-upload-zone:hover { border-color: var(--accent); background: var(--accent-subtle); }
#story-upload-placeholder {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-2); padding: 24px; text-align: center; pointer-events: none;
}
.story-upload-icon { font-size: 42px; }
#story-upload-placeholder p { color: var(--text-primary); font-weight: 700; margin: 0; }
#story-upload-placeholder span { font-size: 11px; color: var(--text-muted); }
#story-preview-wrap {
  width: 100%; display: flex; flex-direction: column;
  align-items: center; padding: 12px;
}
/* Text overlay on preview */
.story-text-overlay-input {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.55);
  color: #fff; border: none; outline: none;
  font-size: 18px; font-weight: 700; text-align: center;
  border-radius: var(--radius-sm); padding: 8px 12px;
  resize: none; width: 80%; max-width: 300px;
  backdrop-filter: blur(4px);
  pointer-events: all; z-index: 2;
}
.story-text-overlay-input::placeholder { color: rgba(255,255,255,0.6); }
.story-remove-media {
  position: absolute; top: 8px; right: 8px;
  background: rgba(239,68,68,0.85); border: none;
  color: #fff; border-radius: 50%; width: 26px; height: 26px;
  font-size: 12px; font-weight: 800; cursor: pointer; z-index: 3;
  display: flex; align-items: center; justify-content: center;
}
.story-caption-input {
  width: 100%; margin-top: 10px;
  background: var(--bg-input); border: 1.5px solid var(--border);
  color: var(--text-primary); border-radius: var(--radius-sm);
  padding: 9px 13px; font-size: 13px; outline: none;
  box-sizing: border-box;
}
.story-caption-input:focus { border-color: var(--accent); }
/* Camera panel */
.story-camera-wrap { display: flex; flex-direction: column; gap: 10px; }
.story-camera-controls { display: flex; gap: var(--sp-2); justify-content: center; }
/* Upload progress */
.story-upload-progress-bar {
  height: 6px; background: var(--bg-secondary); border-radius: 3px; overflow: hidden;
}
.story-upload-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-blue));
  border-radius: 3px; transition: width 0.15s linear;
}
.story-creator-footer {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; padding: 12px 20px;
  border-top: 1px solid var(--border); flex-shrink: 0;
}

/* ── Story Viewer Overlay ── */
.story-viewer-overlay {
  position: fixed; inset: 0; background: #000;
  z-index: var(--z-top); display: flex; align-items: center; justify-content: center;
}
.story-viewer-inner {
  width: 100%; max-width: 440px;
  height: 100dvh; max-height: 860px;
  position: relative; display: flex; flex-direction: column;
  user-select: none;
}
/* Progress bars */
.story-progress-bars {
  display: flex; gap: 3px;
  padding: 14px 12px 0;
  padding-top: max(14px, calc(env(safe-area-inset-top, 0px) + 8px));
  z-index: 10; position: relative; flex-shrink: 0;
}
.story-prog-bar {
  flex: 1; height: 3px;
  background: rgba(255,255,255,0.35);
  border-radius: 2px; overflow: hidden;
}
.story-prog-fill {
  height: 100%; background: #fff;
  border-radius: 2px; width: 0%;
}
.story-prog-fill.done { width: 100%; }
/* Viewer header */
.story-viewer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; z-index: 10; position: relative; flex-shrink: 0;
}
.story-viewer-user { display: flex; align-items: center; gap: 10px; }
.story-viewer-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 15px; color: #fff;
  border: 2px solid rgba(255,255,255,0.5);
}
.story-viewer-name { color: #fff; font-weight: 800; font-size: 14px; }
.story-viewer-time { color: rgba(255,255,255,0.6); font-size: 11px; }
.sv-close-btn { color: #fff; background: rgba(255,255,255,0.15); border-radius: 50%; }
.sv-close-btn svg { stroke: #fff; }
.sv-unmute-btn {
  background: rgba(255,255,255,0.15); border: none; border-radius: 50%;
  width: 32px; height: 32px; cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.sv-view-count {
  color: rgba(255,255,255,0.85); font-size: 12px; font-weight: 700;
  background: rgba(0,0,0,0.4); border-radius: var(--radius); padding: 3px 8px;
}
.sv-delete-btn {
  background: rgba(239,68,68,0.2);
  border: 1px solid rgba(239,68,68,0.4);
  color: #f87171;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
/* Media */
.story-viewer-media {
  flex: 1; display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.story-viewer-media img,
.story-viewer-media video {
  width: 100%; height: 100%; object-fit: contain;
}
/* Text overlay on story */
.sv-text-overlay {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  color: #fff; font-size: 20px; font-weight: 700; text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
  background: rgba(0,0,0,0.45); border-radius: var(--radius-sm);
  padding: 8px 14px; max-width: 80%;
  pointer-events: none; backdrop-filter: blur(3px);
}
/* Caption */
.story-viewer-caption {
  padding: 10px 16px 18px;
  padding-bottom: max(18px, calc(env(safe-area-inset-bottom, 0px) + 8px));
  color: rgba(255,255,255,0.9);
  font-size: 13px; font-weight: 500; text-align: center;
  z-index: 10; position: relative; flex-shrink: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
/* Tap zones — 30% prev / 70% next */
.sv-tap-prev, .sv-tap-next {
  position: absolute; top: 0; bottom: 0; z-index: 5;
}
.sv-tap-prev { left: 0; width: 30%; cursor: w-resize; }
.sv-tap-next { right: 0; width: 70%; cursor: e-resize; }

/* ================================================================
   GAME COMMUNITY PAGES
   ================================================================ */
.gc-hero {
  position: relative; min-height: 260px; background-size: cover;
  background-position: center; display: flex; flex-direction: column;
  justify-content: flex-end; overflow: hidden; border-radius: 0 0 16px 16px;
  margin-bottom: 0;
}
.gc-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.75) 70%, rgba(10,10,20,0.97) 100%);
}
.gc-back-btn {
  position: absolute; top: 16px; left: 16px; z-index: 10;
  background: rgba(255,255,255,0.12); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2); color: #fff;
  padding: 7px 14px; border-radius: var(--radius-lg); font-size: 13px;
  cursor: pointer; transition: background .2s;
}
.gc-back-btn:hover { background: rgba(255,255,255,0.22); }
.gc-hero-content {
  position: relative; z-index: 2; display: flex;
  align-items: flex-end; justify-content: space-between;
  padding: 20px 20px 24px; gap: var(--sp-4);
}
.gc-hero-left { display: flex; align-items: flex-end; gap: var(--sp-4); flex: 1; min-width: 0; }
.gc-cover-thumb {
  width: 90px; height: 120px; border-radius: var(--radius-sm); object-fit: cover;
  border: 2px solid rgba(255,255,255,0.25); flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.gc-cover-placeholder {
  width: 90px; height: 120px; border-radius: var(--radius-sm); flex-shrink: 0;
  background: var(--accent-soft);
  border: 2px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center; font-size: 2.5rem;
}
.gc-hero-info { min-width: 0; }
.gc-title { font-size: 26px; font-weight: 800; color: #fff; margin: 0 0 6px; line-height: 1.2; }
.gc-genres { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.gc-genre-chip {
  background: rgba(255,255,255,0.15); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.9);
  padding: 3px 10px; border-radius: var(--radius-lg); font-size: 11px;
}
.gc-live-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(239,68,68,0.25); border: 1px solid rgba(239,68,68,0.5);
  color: #fca5a5; padding: 4px 10px; border-radius: var(--radius-lg); font-size: 12px; font-weight: 600;
  margin-bottom: 4px;
}
.gc-release { color: rgba(255,255,255,0.55); font-size: 12px; }
.gc-hero-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; }
.gc-rating-big { font-size: 22px; font-weight: 700; color: #fbbf24; }
.gc-rating-big span { font-size: 13px; color: rgba(255,255,255,0.5); }
.gc-follow-btn {
  background: linear-gradient(135deg,var(--accent),var(--accent-2)); color: #fff;
  border: none; padding: 10px 20px; border-radius: 22px;
  font-size: 13px; font-weight: 700; cursor: pointer; transition: opacity .2s, transform .15s;
  white-space: nowrap;
}
.gc-follow-btn:hover { opacity: .88; transform: scale(1.03); }
.gc-follow-btn.following {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-muted);
}

/* Tabs */
.gc-tabs-bar {
  display: flex; gap: var(--sp-1); padding: 12px 16px 0;
  border-bottom: 1px solid var(--border); background: var(--bg-card);
  position: sticky; top: 0; z-index: 10;
}
.gc-tab {
  padding: 10px 18px; border-radius: var(--radius-sm) 8px 0 0; font-size: 13px; font-weight: 600;
  background: transparent; border: none; color: var(--text-muted); cursor: pointer;
  border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
}
.gc-tab:hover { color: var(--text-primary); }
.gc-tab.active {
  color: var(--accent-purple); border-bottom-color: var(--accent-purple);
  background: var(--accent-subtle);
}

/* Content area */
.gc-content { padding: 16px 0; min-height: 300px; }
.gc-loading { padding: 40px; text-align: center; color: var(--text-muted); }

/* LFG grid inside community */
.gc-content .lfg-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 14px; padding: 0 16px; }

/* About tab */
.gc-about { padding: 20px 16px; max-width: 700px; }
.gc-about-card { display: flex; gap: var(--sp-5); margin-bottom: 20px; }
.gc-about-cover { width: 120px; height: 160px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.gc-about-details { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.gc-about-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; background: var(--bg-card); border-radius: var(--radius-sm);
  border: 1px solid var(--border); font-size: 13px;
}
.gc-about-row span { color: var(--text-muted); }
.gc-about-row strong { color: var(--text-primary); font-weight: 600; }
.gc-summary {
  color: var(--text-secondary); font-size: 14px; line-height: 1.7;
  border-left: 3px solid var(--accent-purple); padding-left: 14px;
  margin: 0;
}

/* ================================================================
   PEOPLE SECTION
   ================================================================ */
.people-grid {
  display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5);
}

/* Crypto Projects directory */
.cpx-intro { padding: 14px 18px 6px; font-size: 13.5px; font-weight: 600; color: var(--text-secondary); }
.cpx-intro span { display: block; font-weight: 500; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.cpx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; padding: 8px 18px 96px; }
.cpx-card { border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(180deg, rgba(139,92,246,.05), var(--bg-card)); padding: 14px; cursor: pointer; transition: border-color .18s, transform .18s; }
.cpx-card:hover { border-color: rgba(139,92,246,.5); transform: translateY(-2px); }
.cpx-top { display: flex; align-items: center; gap: 11px; }
.cpx-avatar { position: relative; width: 46px; height: 46px; min-width: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; color: #fff; overflow: hidden; }
.cpx-avatar.va-square { border-radius: 13px; }
.cpx-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cpx-id { flex: 1; min-width: 0; }
.cpx-name { display: flex; align-items: center; gap: 5px; font-weight: 700; font-size: 15px; color: var(--text-primary); white-space: nowrap; overflow: hidden; }
/* Ellipsis lives on its own shrinkable span — it doesn't work on text directly inside a flex container. */
.cpx-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpx-handle { font-size: 12.5px; color: var(--text-muted); }
.cpx-follow { font-size: 12px; padding: 6px 14px; flex-shrink: 0; }
.cpx-bio { font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; margin: 10px 0 0; }
.cpx-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.cpx-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; color: #c4b5fd; background: rgba(139,92,246,.14); border: 1px solid rgba(139,92,246,.34); padding: 3px 9px; border-radius: 999px; }
.cpx-chain { font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: var(--text-secondary); background: var(--bg-secondary); border: 1px solid var(--border); padding: 3px 9px; border-radius: 999px; }
.cpx-ca { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; font-family: ui-monospace, monospace; color: var(--text-secondary); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; padding: 3px 9px; cursor: pointer; }
.cpx-ca:hover { color: var(--accent); border-color: var(--accent); }
.cpx-followers { margin-left: auto; font-size: 12px; color: var(--text-muted); }
@media (max-width: 560px) { .cpx-grid { grid-template-columns: 1fr; padding: 8px 14px 96px; } }
.people-card {
  display: flex; align-items: center; gap: var(--sp-3);
  background: transparent; border: 1px solid transparent;
  border-radius: var(--card-radius); padding: var(--sp-3) var(--sp-4);
  cursor: pointer; transition: all var(--transition);
}
.people-card:hover { background: rgba(255,255,255,0.03); border-color: var(--border); }
.people-avatar {
  width: 52px; height: 52px; min-width: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; color: #fff;
}
.people-info { flex: 1; min-width: 0; }
.people-name { font-weight: 700; font-size: 14px; color: var(--text-primary); }
.people-handle { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.people-bio { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }

/* ================================================================
   FOLLOW MODAL
   ================================================================ */
.follow-modal-user {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 10px 0; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .15s; border-radius: var(--radius-sm);
}
.follow-modal-user:hover { background: var(--bg-card-hover); padding-left: 8px; }
.follow-modal-user:last-child { border-bottom: none; }

/* ================================================================
   PROFILE GAMES TAB
   ================================================================ */
.profile-games-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(100px,1fr));
  gap: 14px; padding: 16px 20px;
}
.profile-game-item {
  cursor: pointer; text-align: center;
  transition: transform .2s;
}
.profile-game-item:hover { transform: scale(1.04); }
.profile-game-cover {
  width: 100%; aspect-ratio: 3/4; border-radius: var(--radius-sm);
  background: var(--bg-card); display: flex; align-items: center;
  justify-content: center; overflow: hidden; border: 1px solid var(--border);
  margin-bottom: 6px;
}
.profile-game-name { font-size: 11px; font-weight: 600; color: var(--text-secondary); }

/* Clickable profile stats */
.clickable-stat { cursor: pointer; transition: color .15s; }
.clickable-stat:hover .stat-val, .clickable-stat:hover .stat-label { color: var(--accent); }

/* ================================================================
   SETTINGS PAGE
   ================================================================ */
.settings-layout {
  display: grid; grid-template-columns: 224px 1fr; gap: 20px;
  align-items: start; max-width: 1040px; margin: 0 auto;
  padding: var(--sp-5) var(--sp-6) var(--sp-10);
}
.settings-nav {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 10px;
  position: sticky; top: 78px;
}
.settings-nav-item {
  padding: 9px 12px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast);
  color: var(--text-secondary); border-radius: var(--radius-sm);
  display: flex; align-items: center; gap: 11px;
}
.settings-nav-item svg { opacity: 0.75; flex-shrink: 0; }
.settings-nav-item:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.settings-nav-item:hover svg { opacity: 1; }
.settings-nav-item.active { background: var(--accent-soft); color: var(--text-primary); }
.settings-nav-item.active svg { color: var(--accent); opacity: 1; }
.settings-nav-item.danger { color: var(--accent-red); }
.settings-nav-item.danger:hover { background: rgba(207,90,94,0.10); }
.settings-content { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.settings-section {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 22px 24px; margin: 0;
}
.settings-section-title {
  font-size: 16px; font-weight: 800; letter-spacing: -0.01em;
  margin: 0 0 18px; padding: 0; border: none; color: var(--text-primary);
  display: flex; align-items: center; flex-wrap: wrap;
}
.settings-field { margin-bottom: 16px; display: flex; flex-direction: column; gap: 7px; }
.settings-field:last-child { margin-bottom: 0; }
.settings-field > label {
  font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
  text-transform: none; letter-spacing: 0;
}
.settings-field input, .settings-field textarea, .settings-field select {
  background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text-primary); border-radius: var(--radius-sm);
  padding: 0 14px; font-size: 14px; width: 100%;
  box-sizing: border-box; height: 42px;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.settings-field input:focus, .settings-field textarea:focus, .settings-field select:focus {
  outline: none; border-color: var(--accent); background: var(--bg-card-hover);
}
.settings-field textarea {
  resize: vertical; font-family: inherit; height: auto;
  min-height: 92px; padding: 12px 14px; line-height: 1.55;
}
.settings-field .field-hint { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.settings-hint { font-size: 13px; color: var(--text-muted); margin: -8px 0 16px; line-height: 1.55; }
.settings-handle-preview {
  padding: 0 14px; height: 42px; display: flex; align-items: center;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-muted); font-size: 14px;
}

/* Appearance — theme + accent-style pickers */
.appx-theme-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.appx-theme {
  display: flex; align-items: center; gap: 13px; padding: 13px;
  background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-md);
  cursor: pointer; text-align: left; transition: border-color var(--transition-fast), background var(--transition-fast);
}
.appx-theme:hover { border-color: var(--border-accent); }
.appx-theme.active { border-color: var(--accent); background: var(--accent-soft); }
.appx-theme-preview { width: 46px; height: 46px; border-radius: 11px; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.10); }
.appx-prev-charcoal { background: linear-gradient(135deg, #000 50%, #16171c 50%); }
.appx-prev-paper { background: linear-gradient(135deg, #ececf2 50%, #ffffff 50%); border-color: rgba(0,0,0,0.12); }
.appx-theme-meta { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.appx-theme-name { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.appx-theme-desc { font-size: 12px; color: var(--text-muted); }
.appx-check { opacity: 0; color: var(--accent); flex-shrink: 0; transition: opacity .15s; }
.appx-theme.active .appx-check { opacity: 1; }
.appx-style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.appx-style {
  display: flex; align-items: center; gap: 9px; padding: 11px 13px;
  background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-md);
  cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast);
}
.appx-style:hover { border-color: var(--border-accent); }
.appx-style.active { border-color: var(--accent); background: var(--accent-soft); }
.appx-style-dot { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }
.appx-style-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.appx-style-tag { margin-left: auto; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); background: var(--bg-card-hover); border-radius: var(--radius-full); padding: 3px 7px; }
@media (max-width: 560px) {
  .appx-style-grid { grid-template-columns: 1fr 1fr; }
  .appx-theme-row { grid-template-columns: 1fr; }
}

/* ── Legacy accent styles (layer over either theme) ── */
[data-style="indigo"]  { --accent:#5f63d8; --accent-2:#4d50b6; --accent-light:#9ba2e0; --accent-blue:#5f63d8; --accent-cyan:#5f63d8; --accent-soft:rgba(95,99,216,.12); --accent-muted:rgba(95,99,216,.16); --accent-glow:rgba(95,99,216,.18); --accent-mid:rgba(95,99,216,.22); --accent-strong:rgba(95,99,216,.30); --border-accent:rgba(95,99,216,.24); }
[data-style="neon"]    { --accent:#6c63ff; --accent-2:#564fd8; --accent-light:#a6a1ff; --accent-blue:#6c63ff; --accent-cyan:#6c63ff; --accent-soft:rgba(108,99,255,.14); --accent-muted:rgba(108,99,255,.18); --accent-glow:rgba(108,99,255,.22); --accent-mid:rgba(108,99,255,.26); --accent-strong:rgba(108,99,255,.34); --border-accent:rgba(108,99,255,.30); }
[data-style="violet"]  { --accent:#8b5cf6; --accent-2:#7339e0; --accent-light:#c4b5fd; --accent-blue:#8b5cf6; --accent-cyan:#8b5cf6; --accent-soft:rgba(139,92,246,.13); --accent-muted:rgba(139,92,246,.17); --accent-glow:rgba(139,92,246,.20); --accent-mid:rgba(139,92,246,.24); --accent-strong:rgba(139,92,246,.32); --border-accent:rgba(139,92,246,.28); }
[data-style="ocean"]   { --accent:#3b82f6; --accent-2:#2563eb; --accent-light:#93c5fd; --accent-blue:#3b82f6; --accent-cyan:#3b82f6; --accent-soft:rgba(59,130,246,.12); --accent-muted:rgba(59,130,246,.16); --accent-glow:rgba(59,130,246,.20); --accent-mid:rgba(59,130,246,.24); --accent-strong:rgba(59,130,246,.30); --border-accent:rgba(59,130,246,.26); }
[data-style="emerald"] { --accent:#10b981; --accent-2:#059669; --accent-light:#6ee7b7; --accent-blue:#10b981; --accent-cyan:#10b981; --accent-soft:rgba(16,185,129,.12); --accent-muted:rgba(16,185,129,.16); --accent-glow:rgba(16,185,129,.20); --accent-mid:rgba(16,185,129,.24); --accent-strong:rgba(16,185,129,.30); --border-accent:rgba(16,185,129,.26); }
.settings-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding: var(--sp-3) 0;
}
.settings-toggle-row + .settings-toggle-row {
  border-top: 1px solid rgba(255,255,255,0.04);
}
.settings-toggle-label {
  font-size: 13px; color: var(--text-primary); font-weight: 500;
}
.settings-toggle-desc {
  font-size: 11px; color: var(--text-muted); margin-top: 2px;
}
.settings-avatar-section {
  display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5);
}
.settings-avatar-preview {
  width: 64px; height: 64px; border-radius: 50%; font-size: 24px;
  font-weight: 700; color: #fff; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.settings-avatar-actions {
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.settings-banner-section {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-bottom: var(--sp-5); padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border);
}
.settings-banner-preview {
  width: 120px; height: 48px; border-radius: var(--radius-sm);
  flex-shrink: 0; border: 1px solid var(--border);
}

/* Accent color swatches */
.accent-color-grid {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
}
.accent-swatch {
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  transition: transform var(--transition-fast); border: 2px solid transparent;
}
.accent-swatch:hover { transform: scale(1.12); }
.accent-swatch.active {
  border-color: #fff; transform: scale(1.08);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.15);
}

/* Toggle switch */
.toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--border); border-radius: 22px; transition: background var(--transition-fast);
}
.toggle-slider:before {
  position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px;
  background: white; border-radius: 50%; transition: transform var(--transition-fast);
}
.toggle-switch input:checked + .toggle-slider { background: var(--accent); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(18px); }

/* Settings buttons */
.settings-actions {
  display: flex; gap: var(--sp-3); padding-top: var(--sp-4);
}
.btn-danger {
  background: var(--accent-red); color: white; border: none;
  padding: var(--sp-2) var(--sp-4); border-radius: var(--btn-radius);
  font-weight: 600; font-size: 13px; cursor: pointer;
  height: var(--btn-height); transition: opacity var(--transition-fast);
}
.btn-danger:hover { opacity: 0.85; }

@media (max-width: 768px) {
  .settings-layout { grid-template-columns: 1fr; gap: 14px; padding: var(--sp-4) var(--sp-3) 88px; }
  .settings-nav {
    flex-direction: row; overflow-x: auto; gap: 6px; padding: 8px;
    position: static; border-radius: var(--radius-md);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-nav-item { white-space: nowrap; padding: 8px 12px; font-size: 12.5px; }
  .settings-content { padding: 0; max-width: 100%; }
  .settings-section { padding: 18px 16px; }
}

/* ================================================================
   COMMENT SYSTEM
   ================================================================ */
.comment-section {
  border-top: 1px solid rgba(255,255,255,0.04);
  padding: 16px 20px 0;
  background: rgba(255,255,255,0.01);
}
.comments-list { display: flex; flex-direction: column; gap: var(--sp-4); margin-bottom: 16px; }
.empty-comments { color: var(--text-muted); font-size: 13px; padding: 20px 0; text-align: center; opacity: 0.7; }
.comment-item { display: flex; gap: 10px; align-items: flex-start; }
.comment-item.comment-bot { background: linear-gradient(135deg,rgba(204,120,92,.05),rgba(168,95,69,.02)); border-radius: var(--radius); padding: 12px 14px; margin: 0 -4px; border: 1px solid rgba(204,120,92,.08); }
.comment-avatar { width: 32px; height: 32px; min-width: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; cursor: pointer; transition: transform 0.15s ease; }
.comment-avatar:hover { transform: scale(1.08); }
.bot-comment-avatar { background: transparent; border: 2px solid #cc785c; box-shadow: 0 0 12px rgba(204,120,92,.15); }
.comment-body { flex: 1; min-width: 0; }
.comment-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.comment-author { font-weight: 700; font-size: 13px; cursor: pointer; color: var(--text-primary); transition: color 0.12s ease; letter-spacing: -0.01em; }
.comment-author:hover { color: var(--accent); }
.comment-time { font-size: 11px; color: var(--text-muted); opacity: 0.7; }
.comment-text { font-size: 13.5px; color: rgba(240,240,250,0.78); line-height: 1.55; word-break: break-word; }
.bot-badge { background: var(--accent); color: white; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 5px; letter-spacing: .3px; }
.comment-input-row { display: flex; gap: 10px; align-items: center; padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.04); }
.comment-input-wrap { flex: 1; display: flex; align-items: center; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-sm); padding: 9px 14px; gap: var(--sp-2); transition: border-color .15s, background .15s; }
.comment-input-wrap:focus-within { border-color: rgba(122,126,140,0.35); background: rgba(255,255,255,0.04); }
.comment-input { flex: 1; background: none; border: none; outline: none; color: var(--text-primary); font-size: 13px; }
.comment-input::placeholder { color: rgba(255,255,255,0.25); }
.comment-submit-btn { background: var(--accent); border: none; color: white; width: 28px; height: 28px; border-radius: 7px; cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: opacity .15s, transform .12s; }
.comment-submit-btn:hover { opacity: .85; transform: scale(1.06); }
/* In-flight replies: the send arrow (and its row buttons) go visibly
   inert so a send never looks laggy or double-fires. */
.comment-submit-btn:disabled, .comment-media-btn:disabled { opacity: .4; cursor: default; pointer-events: none; transform: none; }
.post-detail-reply-btn:disabled { opacity: .5; cursor: default; pointer-events: none; }
.comment-input:disabled { opacity: .6; }
.comment-reply-btn { background: none; border: none; color: rgba(255,255,255,0.3); font-size: 11px; cursor: pointer; padding: 3px 8px; border-radius: 5px; transition: all .12s; font-weight: 500; }
.comment-reply-btn:hover { color: var(--accent); background: var(--accent-subtle); }
.post-highlight { animation: highlightPost .4s ease; }
@keyframes highlightPost { 0%,100% { background: transparent; } 40% { background: var(--accent-muted); } }

/* Interaction micro-animations */
@keyframes likePop {
  0% { transform: scale(1); }
  30% { transform: scale(1.35); }
  60% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
@keyframes reactionBounce {
  0% { transform: scale(1); }
  40% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.post-action-btn.liked svg { animation: likePop 0.35s ease; }
.reaction-pill.active .reaction-emoji { animation: reactionBounce 0.3s ease; }

/* DXED like burst — the logo pops up out of the heart, then fades back into it */
.post-action-btn.like-btn { position: relative; }
.like-burst {
  position: absolute;
  width: 28px; height: 28px;
  margin: -14px 0 0 -14px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  filter: drop-shadow(0 2px 8px rgba(244,63,94,0.35));
  animation: likeBurstUp 0.75s cubic-bezier(0.22, 0.9, 0.32, 1) forwards;
}
@keyframes likeBurstUp {
  0%   { opacity: 0; transform: translateY(0) scale(0.2); }
  22%  { opacity: 1; transform: translateY(-18px) scale(1.18); }
  55%  { opacity: 1; transform: translateY(-22px) scale(1); }
  100% { opacity: 0; transform: translateY(-4px) scale(0.2); }
}

/* Profile back bar (legacy) */
.profile-back-bar { padding: 12px 0 4px; }
.profile-back-btn { display: flex; align-items: center; gap: 6px; background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px; padding: 6px 10px; border-radius: var(--radius-sm); transition: all .2s; }
.profile-back-btn:hover { color: var(--text-primary); background: var(--bg-card); }

/* Floating back button overlaid on the profile banner — no layout space, so it
   never pushes the banner down or cuts into the profile. */
#user-profile-container { position: relative; }
.profile-back-float {
  position: absolute; top: 14px; left: 14px; z-index: 20;
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; cursor: pointer;
  color: #fff; background: rgba(10,10,18,0.5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  transition: background .18s ease, transform .18s ease;
}
.profile-back-float:hover { background: rgba(10,10,18,0.72); }
.profile-back-float:active { transform: scale(0.94); }

/* Bot Replies Tab */
.bot-reply-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin: 8px 16px;
  cursor: pointer;
  transition: background 0.15s;
}
.bot-reply-card:hover { background: var(--card-hover, rgba(255,255,255,0.05)); }
.bot-reply-context { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.bot-reply-quote {
  font-size: 13px; color: var(--text-muted);
  border-left: 3px solid var(--border);
  padding-left: 10px; margin-bottom: 10px;
  font-style: italic;
}
.bot-reply-body { font-size: 14px; color: var(--text-primary); line-height: 1.5; }
.bot-reply-time { font-size: 11px; color: var(--text-muted); margin-top: 8px; }

/* ── Thread-line comment system ── */
.show-more-comments-btn, .show-more-replies-btn { background: none; border: none; color: var(--accent); font-size: 13px; font-weight: 600; cursor: pointer; padding: 8px 0; transition: opacity .15s; display: block; }
.show-more-comments-btn:hover, .show-more-replies-btn:hover { opacity: .75; text-decoration: underline; }
.view-replies-btn { background: none; border: none; color: var(--text-muted); font-size: 12.5px; font-weight: 500; cursor: pointer; padding: 6px 0; display: flex; align-items: center; gap: 6px; transition: color .15s; }
.view-replies-btn:hover { color: var(--accent); }
.view-replies-btn svg { opacity: .7; }
.view-replies-btn.replies-expanded { color: var(--accent); }
.comment-thread-item { display: flex; flex-direction: column; }
.comment-thread-replies { margin-left: 18px; padding-left: 14px; border-left: 2px solid rgba(255,255,255,0.05); display: flex; flex-direction: column; gap: var(--sp-3); margin-top: 10px; }
.comment-thread-replies:hover { border-left-color: var(--accent-soft); }
.comment-item { display: flex; gap: 10px; align-items: flex-start; }
.comment-left { display: flex; flex-direction: column; align-items: center; }
.comment-thread-line { width: 2px; flex: 1; background: rgba(255,255,255,0.05); min-height: 8px; margin-top: 4px; border-radius: 1px; transition: background 0.15s; }
.comment-item:hover > .comment-left > .comment-thread-line { background: var(--accent-muted); }
.comment-item.comment-nested { padding-left: 0; }
.comment-actions-micro { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.comment-like-btn {
  background: none; border: none; color: rgba(255,255,255,0.3); font-size: 11px; cursor: pointer;
  padding: 3px 7px; border-radius: 5px; transition: color .12s, background .12s; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
}
.comment-like-btn svg { transition: transform .15s ease; }
.comment-like-btn:hover { color: #f05a7e; background: rgba(240,90,126,0.10); }
.comment-like-btn.liked { color: #f05a7e; }
.comment-like-btn.pop svg { animation: clike-pop .32s ease; }
.clike-count { font-size: 11px; min-width: 5px; }
.clike-count:hover { text-decoration: underline; }
@keyframes clike-pop { 0%{transform:scale(1)} 40%{transform:scale(1.35)} 100%{transform:scale(1)} }

/* ── Likers modal ── */
.likers-overlay {
  position: fixed; inset: 0; z-index: 6500; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(3px); opacity: 0; transition: opacity .2s; padding: 16px;
}
.likers-overlay.visible { opacity: 1; }
.likers-box {
  width: 100%; max-width: 360px; max-height: 70vh; display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift); transform: translateY(8px) scale(0.98); transition: transform .2s; overflow: hidden;
}
.likers-overlay.visible .likers-box { transform: translateY(0) scale(1); }
.likers-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 15px; color: var(--text-primary); }
.likers-close { background: none; border: none; color: var(--text-secondary); font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; }
.likers-close:hover { color: var(--text-primary); }
.likers-list { overflow-y: auto; padding: 6px; }
.likers-row { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 12px; cursor: pointer; transition: background .12s; }
.likers-row:hover { background: var(--bg-card-hover); }
.likers-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: #fff; }
.likers-meta { min-width: 0; }
.likers-name { font-weight: 600; font-size: 14px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.likers-handle { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.likers-empty { text-align: center; padding: 30px 16px; color: var(--text-muted); font-size: 14px; }

.inline-reply-wrap { margin-top: 8px; }
.inline-reply-row { border-top: none; padding-top: 0; }

/* ── Comment media ── */
.comment-media { margin-top: 6px; }
.comment-media img, .comment-media video { display: block; max-width: 100%; max-height: 260px; border-radius: var(--radius-sm); object-fit: contain; }
.comment-media img:hover { opacity: .9; }
.comment-media-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; display: flex; align-items: center; transition: color .15s; flex-shrink: 0; }
.comment-media-btn:hover { color: var(--accent); }
.comment-media-preview { padding: 6px 0 2px 42px; }
.comment-media-thumb { position: relative; display: inline-block; }
.comment-media-thumb img, .comment-media-thumb video { display: block; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.06); }
.comment-media-remove { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,0.7); border: none; color: #fff; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; transition: background .15s; }
.comment-media-remove:hover { background: rgba(220,50,50,0.8); }
.comment-media-uploading { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-muted); font-size: 12px; padding: 8px 0; }
.spinner-sm { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.1); border-top-color: var(--accent); border-radius: 50%; animation: spin .6s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Comment sort tabs ── */
.comment-sort-tabs { display: flex; gap: var(--sp-1); padding: 8px 0 10px; border-bottom: 1px solid rgba(255,255,255,0.04); margin-bottom: 12px; overflow-x: auto; }
.csort-tab { background: none; border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-xs); color: rgba(255,255,255,0.35); font-size: 11px; padding: 4px 10px; cursor: pointer; white-space: nowrap; transition: all .12s; font-weight: 500; }
.csort-tab:hover { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.1); }
.csort-tab.active { background: var(--accent-soft); border-color: var(--accent-mid); color: var(--accent-light); }

/* ── Insight button on post ── */
.insight-action-btn { gap: var(--sp-1); }
.insight-action-btn.active { color: #cc785c; }

/* ── Insight bubble ── */
.insight-bubble { background: linear-gradient(135deg,rgba(204,120,92,.06),rgba(122,126,140,.04)); border: 1px solid rgba(204,120,92,.1); border-radius: var(--radius); padding: 14px 16px; margin: 8px 18px 4px; }
.insight-bubble.hidden { display: none; }
.insight-bubble-header { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #cc785c; margin-bottom: 8px; letter-spacing: .3px; }
.insight-bubble-text { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.insight-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.insight-chip { background: var(--accent-hover); border: 1px solid var(--accent-muted); border-radius: 7px; color: var(--accent-light); font-size: 11px; font-weight: 500; padding: 5px 10px; cursor: pointer; transition: all .12s; }
.insight-chip:hover { background: var(--accent-muted); border-color: var(--accent-strong); }
.insight-chip.used { opacity: .3; pointer-events: none; }

/* ── Insight thinking animation ── */
.insight-bubble-thinking { display: flex; gap: 5px; padding: 4px 0; align-items: center; }
.insight-bubble-thinking span { width: 7px; height: 7px; background: #cc785c; border-radius: 50%; animation: insightDot 1.2s ease-in-out infinite; }
.insight-bubble-thinking span:nth-child(2) { animation-delay: .2s; }
.insight-bubble-thinking span:nth-child(3) { animation-delay: .4s; }
@keyframes insightDot { 0%,80%,100% { transform: scale(0.6); opacity:.4; } 40% { transform: scale(1); opacity:1; } }

/* ── Game Search Autocomplete ── */
.game-search-wrap { position: relative; flex: 1; min-width: 120px; }
.game-search-input {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-sm);
  color: var(--text-primary); font-size: 13px; padding: 8px 12px; outline: none;
  transition: border-color .15s, background .15s;
}
.game-search-input::placeholder { color: rgba(255,255,255,0.35); }
.game-search-input:focus { border-color: rgba(122,126,140,0.4); background: rgba(255,255,255,0.05); }
.game-search-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; z-index: var(--z-overlay);
  background: #1c1d23; border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-sm);
  margin-top: 4px; max-height: 240px; overflow-y: auto; box-shadow: 0 12px 40px rgba(0,0,0,.6);
}
.game-search-dropdown.hidden { display: none; }
.game-search-option {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  cursor: pointer; font-size: 13px; color: var(--text-primary); transition: background .1s;
}
.game-search-option:hover { background: var(--accent-soft); }
.game-search-option:first-child { border-radius: var(--radius-sm) 10px 0 0; }
.game-search-option:last-child { border-radius: 0 0 10px 10px; }
.game-search-icon {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; letter-spacing: 0.02em; color: #fff; text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}
.game-search-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-search-cat { margin-left: auto; font-size: 11px; color: var(--text-muted); flex-shrink: 0; padding-left: 8px; }
.game-search-empty { padding: 14px; text-align: center; font-size: 13px; color: var(--text-muted); }

/* ── Compose Modal (Post Composer — Bottom Sheet) ── */
#post-modal {
  align-items: flex-end;
  justify-content: center;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
#post-modal.hidden .compose-modal { transform: translateY(100%); }
.compose-modal { background: var(--bg-card); border: 1px solid var(--border); border-bottom: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; width: 100%; max-width: 620px; box-shadow: 0 -16px 48px rgba(0,0,0,.4); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); transform: translateY(0); }
.compose-modal::before { content: ''; display: block; width: 32px; height: 3px; background: rgba(255,255,255,0.15); border-radius: 2px; margin: 6px auto 0; }
.compose-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 8px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.compose-modal-header .icon-btn { color: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-sm); }
.compose-modal-header .icon-btn:hover { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.08); }
.compose-modal-title { font-size: 16px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; }
.compose-modal-body { display: flex; gap: 12px; padding: 14px 18px 8px; }
.compose-avatar-col { flex-shrink: 0; }
.compose-content-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.compose-textarea { width: 100%; min-height: 90px; max-height: 220px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); outline: none; resize: none; color: var(--text-primary); font-size: 15px; font-family: inherit; line-height: 1.5; padding: 12px 14px; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); }
.compose-textarea:focus { border-color: var(--accent); background: var(--bg-card); box-shadow: 0 0 0 3px var(--accent-subtle); }
.compose-textarea::placeholder { color: var(--text-muted); }
.compose-tags-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--border); align-items: center; }
.compose-tag-search-slot { flex: 1; min-width: 100px; max-width: 180px; position: relative; }
.compose-tag-search-slot .game-search-wrap { position: relative; }
.compose-tag-search-slot .game-search-input { font-size: 11.5px; padding: 5px 10px; border-radius: var(--radius-xs); }
.compose-tag-search-slot .game-search-wrap::before {
  content: '';
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.35)' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='11' x2='10' y2='11'/%3E%3Cline x1='8' y1='9' x2='8' y2='13'/%3E%3Cline x1='15' y1='12' x2='15.01' y2='12'/%3E%3Cline x1='18' y1='10' x2='18.01' y2='10'/%3E%3Cpath d='M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat;
}
.compose-tag-search-slot .game-search-input { font-size: 12px; padding: 6px 8px 6px 26px; border-radius: var(--radius-xs); background: transparent; border: none; }
.compose-tag-search-slot .game-search-input:focus { background: rgba(255,255,255,0.03); border: none; }
.compose-tag-search-slot .game-search-input::placeholder { color: rgba(255,255,255,0.3); }
.compose-tag-select { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-sm); color: rgba(255,255,255,0.6); font-size: 13px; padding: 8px 12px; outline: none; cursor: pointer; transition: border-color .15s, background .15s; }
.compose-tag-select:hover, .compose-tag-select:focus { border-color: var(--accent-mid); background: rgba(255,255,255,0.04); }
.compose-tag-select option { background: #111122; }
.compose-modal-footer { display: flex; align-items: center; padding: 12px 18px 16px; border-top: 1px solid var(--border); gap: var(--sp-3); }
.compose-footer-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.compose-char-count { font-size: 12px; color: var(--text-muted); }

/* ── Post image preview (in composer) ── */
.post-image-preview { position: relative; margin-top: 10px; }
.post-img-wrap { position: relative; display: inline-block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.post-img-thumb { max-width: 100%; border-radius: var(--radius); object-fit: cover; display: block; }
.post-img-remove { position: absolute; top: 5px; right: 5px; background: rgba(0,0,0,.6); backdrop-filter: blur(8px); border: none; color: white; border-radius: 50%; width: 22px; height: 22px; cursor: pointer; font-size: 11px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .15s, transform .15s; }
.post-img-remove:hover { background: var(--accent-red); transform: scale(1.1); }

/* ── Compose image preview: a clean thumbnail tray ── */
.multi-img-preview { display: flex; flex-wrap: wrap; gap: 8px; }
.multi-img-item { position: relative; width: 92px; height: 92px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); flex-shrink: 0; }
.multi-img-item .post-img-thumb { width: 100%; height: 100%; max-height: none; object-fit: cover; display: block; border-radius: 0; }
.multi-img-add {
  display: flex; align-items: center; justify-content: center;
  width: 92px; height: 92px; flex-shrink: 0;
  border: 1.5px dashed var(--border-accent); border-radius: var(--radius-sm);
  cursor: pointer; color: var(--accent);
  background: var(--accent-subtle);
  transition: border-color .15s, background .15s, color .15s;
}
.multi-img-add:hover { border-color: var(--accent); background: var(--accent-soft); }
.multi-img-add svg { width: 22px; height: 22px; }

.post-video-preview { position: relative; margin-top: 8px; border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(255,255,255,.1); }
.post-video-preview video { display: block; }
.post-media-remove { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.75); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.15); color: white; border-radius: 50%; width: 28px; height: 28px; cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; transition: background .15s, transform .15s; z-index: 2; }
.post-media-remove:hover { background: rgba(220,50,50,.8); transform: scale(1.1); }

/* ── Custom confirm dialog ── */
.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: var(--z-top);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.confirm-overlay.visible { opacity: 1; }
.confirm-box {
  background: #1c1d23;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  padding: 24px;
  max-width: 340px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.confirm-message {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: 20px;
  text-align: center;
}
.confirm-actions {
  display: flex;
  gap: 10px;
}
.confirm-cancel-btn,
.confirm-ok-btn {
  flex: 1;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: background 0.15s, transform 0.1s;
  font-family: inherit;
}
.confirm-cancel-btn {
  background: rgba(255,255,255,0.08);
  color: var(--text-secondary);
}
.confirm-cancel-btn:hover { background: rgba(255,255,255,0.12); }
.confirm-ok-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-blue));
  color: white;
}
.confirm-ok-btn:hover { opacity: 0.9; }
.confirm-ok-btn.confirm-danger {
  background: var(--accent-red);
}
.confirm-ok-btn:active, .confirm-cancel-btn:active { transform: scale(0.97); }

/* ── Post image in feed ── */
/* Hug the image so small/square images (e.g. token logos) don't sit in a wide,
   half-empty box. Large images still fill the column (capped by max-width). */
.post-image-container { margin: 12px auto 0; width: fit-content; max-width: 100%; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid rgba(255,255,255,0.06); }
.post-image { max-width: 100%; max-height: 460px; height: auto; cursor: zoom-in; display: block; border-radius: var(--radius); transition: transform .25s ease, opacity .2s; margin: 0 auto; }
.post-image:hover { transform: scale(1.01); opacity: .95; }

/* ── Twitter-style multi-image grid ── */
.post-image-grid {
  display: grid; gap: 3px; margin: 12px 0 0; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}
.post-image-grid.grid-2 { grid-template-columns: 1fr 1fr; aspect-ratio: 16/9; }
.post-image-grid.grid-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 16/9; }
.post-image-grid.grid-3 .post-grid-img:first-child { grid-row: 1 / 3; }
.post-image-grid.grid-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 16/9; }
.post-grid-img { overflow: hidden; cursor: pointer; position: relative; border-radius: var(--radius-xs); }
.post-grid-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .2s; }
.post-grid-img:hover img { opacity: .85; }

/* ── Image lightbox ── */
.img-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); backdrop-filter: blur(8px); z-index: var(--z-top); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.img-lightbox-inner { position: relative; max-width: 90vw; max-height: 90vh; display: flex; align-items: center; justify-content: center; }
.img-lightbox-inner img { max-width: 100%; max-height: 90vh; border-radius: var(--radius); object-fit: contain; }
.lb-close { position: absolute; top: -14px; right: -14px; background: rgba(255,255,255,.1); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.1); color: white; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; font-size: 14px; transition: background .15s; z-index: 2; }
.lb-close:hover { background: rgba(255,255,255,.2); }
.lb-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.5); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.15); border-radius: 50%;
  width: 44px; height: 44px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .15s; z-index: 2;
}
.lb-arrow:hover { background: rgba(255,255,255,.2); }
.lb-arrow:active { transform: translateY(-50%) scale(.9); }
.lb-arrow-left { left: -60px; }
.lb-arrow-right { right: -60px; }
.lb-counter {
  position: absolute; bottom: -36px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.6); backdrop-filter: blur(8px);
  color: #fff; font-size: 13px; font-weight: 600;
  padding: 4px 14px; border-radius: var(--radius-lg);
  letter-spacing: 1px;
}
@media (max-width: 768px) {
  .lb-arrow-left { left: 8px; }
  .lb-arrow-right { right: 8px; }
}

/* ── Profile page tweaks ── */
.profile-banner-icon { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); opacity: .3; font-size: 72px; z-index: 1; pointer-events: none; }
.profile-banner { position: relative; }
/* Shimmer only when user has a custom banner — clean by default */
.profile-banner.has-custom-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.06) 38%, rgba(255,255,255,0.12) 40%, rgba(255,255,255,0.06) 42%, transparent 50%);
  background-size: 200% 100%;
  animation: none;
  pointer-events: none;
}
@keyframes profile-banner-shimmer {
  0%, 100% { background-position: 200% 0; }
  50% { background-position: -200% 0; }
}

/* ── Animated Profile Header Backgrounds ── */
@keyframes header-gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.header-neon-pulse, .header-aurora-wave, .header-fire-storm, .header-galaxy-spin,
.header-matrix-rain, .header-lava-flow, .header-plasma-shift, .header-cyber-grid,
.header-rainbow-flow, .header-ice-crystal, .header-toxic-glow, .header-sunset-anim,
.header-vaporwave, .header-sakura-wind, .header-electric-storm, .header-blood-eclipse,
.header-ocean-current, .header-void-shift, .header-inferno-blaze, .header-diamond-shine,
.header-coral-reef, .header-bubblegum-pop, .header-holo-prism, .header-midnight-city {
  background-size: 300% 300%;
  animation: header-gradient-shift 6s ease infinite;
}
.header-rainbow-flow, .header-holo-prism { animation-duration: 4s; }
.header-fire-storm, .header-lava-flow, .header-inferno-blaze { animation-duration: 3s; }
.header-neon-pulse, .header-electric-storm { animation-duration: 2.5s; }

/* ── Header picker grid ── */
.header-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--sp-2);
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
}
.header-picker-item {
  height: 60px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .2s, transform .15s;
  position: relative;
  overflow: hidden;
}
.header-picker-item:hover { transform: scale(1.04); border-color: rgba(255,255,255,.2); }
.header-picker-item.active { border-color: var(--accent); }
.header-picker-item .header-picker-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,.6); padding: 2px 6px;
  font-size: 10px; color: #fff; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.profile-avatar-lg {
  width: 110px; height: 110px; min-width: 110px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 38px; color: white;
  border: 4px solid var(--bg-primary);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--accent-muted);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer; position: relative; z-index: var(--z-card);
}
.profile-avatar-lg:hover {
  transform: scale(1.05);
}
.profile-online-dot { font-size: 11px; margin-left: 6px; }
.profile-edit-btn { display: flex; align-items: center; gap: 6px; font-size: 13px; }

/* ── Replies feed (profile tab) ── */
.replies-feed { display: flex; flex-direction: column; gap: 2px; }
.reply-feed-item { padding: 18px 22px; border-bottom: 1px solid rgba(255,255,255,0.04); cursor: pointer; transition: background .15s; }
.reply-feed-item:hover { background: rgba(255,255,255,.02); }
.reply-feed-quote-block { border-left: 2px solid var(--accent-mid); padding: 8px 14px; margin-bottom: 14px; border-radius: 0 8px 8px 0; background: var(--accent-subtle); }
.reply-feed-quote-label { font-size: 11px; color: var(--text-muted); margin-bottom: 5px; }
.reply-feed-quote-text { font-size: 13px; color: var(--text-secondary); line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Conversation thread: original post (with its author avatar) → your reply */
.reply-thread-row { display: flex; gap: var(--sp-3); align-items: stretch; }
.reply-thread-rail { display: flex; flex-direction: column; align-items: center; width: 38px; flex-shrink: 0; }
.reply-op-avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: #fff; flex-shrink: 0; cursor: pointer; }
.reply-thread-line { flex: 1; width: 2px; min-height: 12px; background: var(--border); margin: 4px 0 -2px; }
.reply-thread-op { flex: 1; min-width: 0; padding-bottom: 12px; }
.reply-thread-op .reply-feed-quote-text { margin-top: 3px; }
.reply-feed-row { display: flex; gap: var(--sp-3); align-items: flex-start; }
.reply-feed-avatar { width: 38px; height: 38px; min-width: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: white; flex-shrink: 0; }
.reply-feed-avatar-bot { object-fit: cover; border: 2px solid #cc785c; background: transparent; box-shadow: 0 0 12px rgba(204,120,92,.3); }
.reply-feed-bubble { flex: 1; background: rgba(255,255,255,0.02); border-radius: 2px 14px 14px 14px; padding: 12px 16px; border: 1px solid rgba(255,255,255,.04); }
.reply-feed-item:hover .reply-feed-bubble { border-color: var(--accent-soft); }
.reply-feed-meta { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 6px; flex-wrap: wrap; }
.reply-feed-name { font-weight: 700; font-size: 14px; color: var(--text-primary); }
.reply-feed-time { font-size: 11px; color: var(--text-muted); margin-left: auto; }
.reply-feed-text { font-size: 14px; color: var(--text-secondary); line-height: 1.55; }

/* Bot-specific reply card enhancements */
.reply-feed-item--bot { border-bottom: 1px solid rgba(204,120,92,.12); }
.reply-feed-item--bot .reply-feed-bubble { background: linear-gradient(135deg, rgba(204,120,92,.06), rgba(168,95,69,.03)); border: 1px solid rgba(204,120,92,.12); }
.reply-feed-item--bot:hover .reply-feed-bubble { border-color: rgba(204,120,92,.25); }
.reply-feed-item--bot .reply-feed-quote-block { border-left-color: rgba(204,120,92,.5); background: rgba(204,120,92,.05); }

/* ================================================================
   PLANS / SUBSCRIPTION
   ================================================================ */

/* Subscription checkmark badges */
.vb-sub-check { color: #1D9BF0; filter: drop-shadow(0 1px 4px rgba(29,155,240,0.3)); margin-left: 1px; }
.vb-sub-check:hover { filter: drop-shadow(0 2px 10px rgba(29,155,240,0.5)); }
.vb-sub-pro { color: #F59E0B; filter: drop-shadow(0 1px 4px rgba(245,158,11,0.4)); }
.vb-sub-pro:hover { filter: drop-shadow(0 2px 10px rgba(245,158,11,0.5)); }

/* ================================================================
   VERIFICATION APPLICATION (earned, staff-reviewed)
   ================================================================ */
.verify-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(0,0,0,0.66);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  padding: 18px; opacity: 0; transition: opacity 0.2s ease;
}
.verify-overlay.visible { opacity: 1; }
.verify-box {
  width: 100%; max-width: 460px;
  max-height: 92vh; overflow-y: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 24px 70px -20px rgba(0,0,0,0.7);
  position: relative;
  transform: translateY(10px) scale(0.98);
  transition: transform 0.24s var(--ease);
}
.verify-overlay.visible .verify-box { transform: none; }
.verify-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: none; color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.verify-close:hover { background: rgba(255,255,255,0.12); color: var(--text-primary); }
/* Hero */
.verify-hero {
  position: relative; text-align: center;
  padding: 34px 24px 24px;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(124,140,255,0.10), transparent 60%),
    linear-gradient(180deg, var(--bg-card), var(--bg-elevated));
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.verify-hero-shield {
  display: inline-flex; color: #cfd3e0;
  filter: drop-shadow(0 6px 18px rgba(124,140,255,0.25));
  animation: verifyShieldIn 0.5s var(--ease) both;
}
@keyframes verifyShieldIn { from { transform: scale(0.6) translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
.verify-hero-title { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; margin-top: 10px; color: var(--text-primary); }
.verify-hero-sub { font-size: 13px; color: var(--text-secondary); margin-top: 4px; font-weight: 500; }
/* Body */
.verify-body { padding: 20px 22px 22px; }
.verify-note { background: rgba(189,138,87,0.10); border: 1px solid rgba(189,138,87,0.22); color: var(--accent-orange); font-size: 12.5px; padding: 9px 12px; border-radius: var(--radius-sm); margin-bottom: 16px; }
.verify-why { margin-bottom: 18px; }
.verify-why-title { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }
.verify-criteria { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.verify-criteria li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--text-secondary); line-height: 1.35; }
.verify-criteria strong { color: var(--text-primary); font-weight: 700; }
.verify-tick { color: var(--accent-green); flex-shrink: 0; margin-top: 1px; }
.verify-why-foot { font-size: 12px; color: var(--text-muted); margin-top: 12px; line-height: 1.5; }
/* Form */
.verify-form { display: flex; flex-direction: column; }
.verify-label { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); margin: 14px 0 6px; }
.verify-optional { color: var(--text-muted); font-weight: 500; }
.verify-form .input-field { width: 100%; }
.verify-form textarea.input-field { resize: vertical; line-height: 1.5; }
.verify-submit { margin-top: 18px; width: 100%; justify-content: center; padding: 11px; font-size: 14px; font-weight: 700; }
.verify-fineprint { font-size: 11px; color: var(--text-muted); text-align: center; margin-top: 12px; line-height: 1.5; }
/* States */
.verify-state { text-align: center; padding: 18px 26px 28px; }
.verify-state h3 { font-size: 18px; font-weight: 800; margin: 14px 0 8px; color: var(--text-primary); }
.verify-state p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; margin: 0 auto; max-width: 320px; }
.verify-state-badge, .verify-pending-pulse { display: inline-flex; color: #cfd3e0; }
.verify-state-success .verify-state-badge { color: #8fa2ff; filter: drop-shadow(0 6px 18px rgba(124,140,255,0.4)); }
.verify-pending-pulse { color: var(--accent-gold); animation: verifyPulse 1.8s ease-in-out infinite; }
@keyframes verifyPulse { 0%,100% { opacity: 0.55; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1); } }
.verify-pending-meta { font-size: 12px; color: var(--text-muted); margin-top: 12px; }
.verify-cta { margin-top: 20px; min-width: 140px; }

/* Admin: verification review cards */
.adm-vr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.adm-vr-count { flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--accent-gold); background: rgba(179,153,63,0.14); border: 1px solid rgba(179,153,63,0.25); padding: 4px 11px; border-radius: var(--radius-full); }
.adm-vr-section-label { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); margin: 22px 0 10px; }
.adm-vr-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 12px; }
.adm-vr-top { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.adm-vr-avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; font-size: 15px; cursor: pointer; }
.adm-vr-id { flex: 1; min-width: 0; }
.adm-vr-name { font-size: 14.5px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-vr-cat { font-size: 11px; font-weight: 600; color: var(--text-secondary); background: rgba(255,255,255,0.05); border: 1px solid var(--border); padding: 1px 8px; border-radius: var(--radius-full); }
.adm-vr-handle { font-size: 12.5px; color: var(--text-muted); cursor: pointer; margin-top: 2px; }
.adm-vr-handle:hover { color: var(--text-secondary); }
.adm-vr-status { flex-shrink: 0; font-size: 11px; font-weight: 700; text-transform: capitalize; padding: 3px 10px; border-radius: var(--radius-full); }
.adm-vr-pending { color: var(--accent-gold); background: rgba(179,153,63,0.14); }
.adm-vr-approved { color: var(--accent-green); background: rgba(79,158,106,0.16); }
.adm-vr-denied { color: var(--accent-red); background: rgba(207,90,94,0.16); }
.adm-vr-reason { font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.adm-vr-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.adm-vr-link { font-size: 12px; color: var(--accent-light); background: rgba(255,255,255,0.04); border: 1px solid var(--border); padding: 3px 9px; border-radius: var(--radius-full); text-decoration: none; }
.adm-vr-link:hover { background: rgba(255,255,255,0.08); }
.adm-vr-actions { display: flex; gap: 8px; margin-top: 14px; }
.adm-vr-actions .btn-primary, .adm-vr-actions .btn-secondary { flex: 1; justify-content: center; }

/* Early-supporter / founder badges */
.early-badge {
  display: inline-flex; align-items: center; vertical-align: middle;
  font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: var(--radius-full); padding: 2px 9px; margin-left: 2px;
  border: 1px solid var(--border);
}
.early-founder { color: #e7c873; background: rgba(231,200,115,0.10); border-color: rgba(231,200,115,0.34); }
.early-dayone  { color: #cfd3dc; background: rgba(207,211,220,0.08); border-color: rgba(207,211,220,0.26); }
.early-early   { color: var(--text-secondary); background: rgba(255,255,255,0.04); }

/* First-post celebration */
.firstpost-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(0,0,0,0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; transition: opacity 0.22s ease;
}
.firstpost-overlay.visible { opacity: 1; }
.firstpost-box {
  width: 100%; max-width: 420px; text-align: center;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 22px; padding: 34px 28px 28px;
  box-shadow: 0 24px 70px -20px rgba(0,0,0,0.7);
  transform: translateY(10px) scale(0.98); transition: transform 0.24s var(--ease);
}
.firstpost-overlay.visible .firstpost-box { transform: none; }
.firstpost-spark { font-size: 34px; color: #e7c873; line-height: 1; margin-bottom: 12px; }
.firstpost-title { font-size: 22px; font-weight: 900; letter-spacing: -0.02em; color: var(--text-primary); margin: 0 0 10px; }
.firstpost-sub { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin: 0 auto 18px; max-width: 320px; }
.firstpost-badge { display: inline-flex; margin: 0 auto 20px; font-size: 12px; padding: 4px 14px; }
.firstpost-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Subtle "supporter" chip — profile only, barely there (NOT verification) */
.supporter-chip {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-full);
  padding: 1px 7px;
  margin-left: 2px;
  opacity: 0.7;
  cursor: default;
}
.supporter-chip:hover { opacity: 1; }

/* Subscription tooltip on checkmark click */
.sub-tooltip {
  position: fixed; z-index: var(--z-top);
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 6px 12px; font-size: 12px; font-weight: 600;
  color: var(--text-secondary); white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  animation: fadeIn .15s ease;
  pointer-events: none;
}
.sub-tooltip-label { color: #1D9BF0; font-weight: 800; }

/* Plan badges (sidebar/plan page) */
.plan-badge { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 5px; font-size: 9px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; line-height: 1; vertical-align: middle; }
.plan-badge-plus { background: var(--accent-muted); color: var(--accent-light); border: 1px solid var(--accent-mid); }
.plan-badge-pro  { background: rgba(245,158,11,0.12); color: #fbbf24; border: 1px solid rgba(245,158,11,0.18); }

/* Sidebar plan badge */
#sidebar-plan-badge .plan-badge { font-size: 9px; padding: 2px 6px; }

/* Nav DXED+ item */
.nav-item-plans { position: relative; }
.nav-plans-badge { background: var(--accent); color: #fff; font-size: 9px; font-weight: 800; padding: 2px 5px; border-radius: 99px; letter-spacing: .3px; }
.nav-plans-active > span:first-of-type { background: linear-gradient(90deg,var(--accent),#f59e0b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* Plans hero */
.plans-hero { text-align: center; padding: var(--sp-12) var(--sp-6) var(--sp-8); }
.plans-hero-icon { font-size: 36px; margin-bottom: var(--sp-4); }
.plans-hero-title { font-size: 24px; font-weight: 800; margin-bottom: var(--sp-3); color: var(--text-primary); letter-spacing: -0.03em; }
.plans-hero-sub { color: var(--text-secondary); font-size: 14px; max-width: 420px; margin: 0 auto var(--sp-4); line-height: 1.5; }
.plans-coin-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); text-decoration: none; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 7px 14px; margin: 0 auto var(--sp-3); transition: border-color .15s, color .15s; }
.plans-coin-pill:hover { border-color: var(--border-accent); color: var(--text-primary); }
.plans-coin-pill strong { color: var(--accent); }
.plans-treasury-line { color: #6ee7a8 !important; font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.plans-current-banner { display: inline-flex; align-items: center; gap: var(--sp-2); background: var(--accent-soft); border: 1px solid var(--accent-mid); border-radius: var(--radius-full); padding: 6px var(--sp-4); font-size: 13px; color: var(--text-secondary); margin-top: var(--sp-2); }

/* Plans grid */
.plans-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-4); padding: 0 var(--sp-6) var(--sp-8); max-width: 960px; margin: 0 auto; }
@media(max-width:860px) { .plans-grid { grid-template-columns: 1fr; max-width: 400px; } }

/* Plan card */
.plan-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-6) var(--sp-5) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-5); position: relative; transition: all var(--transition); }
.plan-card:hover { transform: translateY(-2px); border-color: var(--accent-muted); background: var(--bg-card-hover); }
.plan-card-featured { border-color: var(--accent-mid); }
.plan-card-current { border-color: rgba(34,197,94,0.3); }

/* Popular / best value badge on top */
.plan-badge-top { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 4px 14px; border-radius: 99px; font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: white; white-space: nowrap; }

/* Plan card header */
.plan-card-header { text-align: center; }
.plan-name { font-size: 18px; font-weight: 800; color: var(--text-primary); margin-bottom: 6px; }
.plan-price { font-size: 36px; font-weight: 900; color: var(--plan-color,var(--text-primary)); line-height: 1; }
.plan-period { font-size: 14px; font-weight: 400; color: var(--text-muted); }

/* Plan features */
.plan-features { list-style: none; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.plan-feature { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: 13px; }
.feature-ok { color: var(--text-secondary); }
.feature-no { color: var(--text-muted); text-decoration: line-through; }
.feature-icon { font-size: 11px; font-weight: 900; min-width: 14px; margin-top: 2px; }
.feature-ok .feature-icon { color: var(--accent-green); }
.feature-no .feature-icon { color: var(--text-muted); }

/* CTA buttons */
.plan-cta-btn { width: 100%; height: 42px; border-radius: var(--radius-sm); font-weight: 700; font-size: 14px; cursor: pointer; border: none; transition: all var(--transition); }
.plan-cta-upgrade { background: var(--accent); color: white; }
.plan-cta-upgrade:hover:not(:disabled) { background: var(--accent-2); }
.plan-cta-current { background: rgba(34,197,94,0.1); color: var(--accent-green); border: 1px solid rgba(34,197,94,0.25); cursor: default; }
.plan-cta-downgrade { background: var(--bg-input); color: var(--text-muted); border: 1px solid var(--border); }
.plan-cta-downgrade:hover:not(:disabled) { color: var(--text-secondary); border-color: rgba(255,255,255,0.12); }
.plan-cta-btn:disabled { opacity: .6; cursor: not-allowed; }

/* Plans footer */
.plans-footer { text-align: center; padding: 0 24px 48px; color: var(--text-muted); font-size: 13px; line-height: 1.7; }

/* Upgrade prompt toast */
.upgrade-prompt-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: var(--z-top); animation: slideInUp 0.3s ease; }
.upgrade-prompt-inner { display: flex; align-items: center; gap: var(--sp-3); background: var(--bg-elevated); border: 1px solid var(--border-accent); border-radius: var(--radius); padding: 14px 18px; box-shadow: var(--shadow-lift); min-width: min(340px, calc(100vw - 32px)); max-width: 480px; }
.upgrade-prompt-icon { font-size: 22px; flex-shrink: 0; }
.upgrade-prompt-text { flex: 1; }
.upgrade-prompt-text strong { display: block; font-size: 14px; color: var(--text-primary); margin-bottom: 2px; }
.upgrade-prompt-text span { font-size: 12px; color: var(--text-muted); }
.upgrade-prompt-btn { background: linear-gradient(135deg,var(--accent-2),#4f46e5); color: white; border: none; border-radius: var(--radius-sm); padding: 8px 16px; font-weight: 800; font-size: 13px; cursor: pointer; white-space: nowrap; }
.upgrade-prompt-btn:hover { opacity: .85; }
.upgrade-prompt-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; padding: 4px; line-height: 1; flex-shrink: 0; }
.upgrade-prompt-close:hover { color: var(--text-primary); }
@keyframes slideInUp { from { opacity: 0; transform: translateX(-50%) translateY(20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* ===== POLLS ===== */
.poll-card { margin: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.poll-option { position: relative; border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius-sm); overflow: hidden; padding: 10px 12px; cursor: pointer; transition: border-color .2s; display: flex; align-items: center; justify-content: space-between; }
.poll-option:hover { border-color: rgba(122,126,140,.6); }
.poll-option.voted { border-color: var(--accent); cursor: default; }
.poll-option.winner { border-color: var(--accent-light); }
.poll-option-bar { position: absolute; left: 0; top: 0; height: 100%; background: rgba(122,126,140,.18); transition: width .6s cubic-bezier(.4,0,.2,1); z-index: 0; }
.poll-option-text { position: relative; z-index: 1; font-size: 14px; }
.poll-option-pct { position: relative; z-index: 1; font-size: 13px; font-weight: 600; opacity: .9; }
.poll-meta { font-size: 12px; opacity: .5; margin-top: 4px; }

/* ===== SEARCH ===== */
.search-hero { padding: 20px 16px 12px; }
.search-input-big { width: 100%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: 14px 18px; font-size: 16px; color: inherit; outline: none; transition: border-color .2s; box-sizing: border-box; }
.search-input-big:focus { border-color: var(--accent); }
.search-tabs { display: flex; gap: var(--sp-2); padding: 0 16px 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.search-tab { padding: 6px 16px; border-radius: var(--radius-lg); font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid rgba(255,255,255,.15); background: none; color: inherit; transition: all .2s; }
.search-tab.active, .search-tab:hover { background: var(--accent); border-color: var(--accent); }
.search-section-title { font-size: 13px; font-weight: 600; opacity: .5; padding: 12px 16px 6px; text-transform: uppercase; letter-spacing: .05em; }
.search-user-row { display: flex; align-items: center; gap: var(--sp-3); padding: 10px 16px; cursor: pointer; transition: background .15s; }
.search-user-row:hover { background: rgba(255,255,255,.04); }
.search-game-row { display: flex; align-items: center; gap: var(--sp-3); padding: 8px 16px; cursor: pointer; transition: background .15s; }
.search-game-row:hover { background: rgba(255,255,255,.04); }
.search-game-img { width: 36px; height: 48px; object-fit: cover; border-radius: var(--radius-xs); }
.search-recent { padding: 12px 16px; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.search-recent-chip { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-lg); padding: 5px 14px; font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.search-recent-chip:hover { background: rgba(122,126,140,.2); }

/* ===== CLANS ===== */
/* ── Clans Redesign ── */
.clans-layout { padding: 0 var(--sp-5) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-6); }
.clans-group { display: flex; flex-direction: column; gap: var(--sp-3); }
.clans-search-bar { display:flex; align-items:center; gap:var(--sp-3); }
.clans-search-bar input { flex:1; background:var(--bg-input); border:1px solid var(--border); border-radius:var(--input-radius); height:var(--input-height); padding:0 var(--sp-3); color:var(--text-primary); font-size:14px; outline:none; transition:border-color var(--transition); }
.clans-search-bar input:focus { border-color:var(--accent); }
.clans-search-bar svg { color:var(--text-muted); flex-shrink:0; }
.clans-subsection-title { font-size:12px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; padding:0; }
.clans-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:var(--sp-3); }
.clan-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--card-radius); overflow:hidden; cursor:pointer; transition:all var(--transition); }
.clan-card:hover { border-color:var(--accent-muted); background:var(--bg-card-hover); }
.clan-card-banner { height:44px; }
.clan-card-body { padding:var(--sp-3) var(--sp-4) var(--sp-4); }
.clan-card-top { display:flex; align-items:flex-start; gap:10px; margin-top:-20px; }
.clan-card-info { flex:1; padding-top:16px; }
.clan-avatar { width:40px; height:40px; border-radius:10px; background:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; border:3px solid var(--bg-card); flex-shrink:0; text-transform:uppercase; }
.clan-tag { display:inline-block; background:var(--accent-soft); border:1px solid var(--border-accent); color:var(--accent-light); border-radius:4px; padding:1px 6px; font-size:11px; font-weight:700; font-family:ui-monospace,monospace; }
.clan-tag-inline { display:inline-block; background:var(--accent-soft); border:1px solid var(--border-accent); color:var(--accent-light); border-radius:3px; padding:0 5px; font-size:11px; font-weight:700; font-family:ui-monospace,monospace; margin-left:2px; cursor:pointer; vertical-align:middle; transition:background var(--transition-fast); }
.clan-tag-inline:hover { background:var(--accent-muted); }
.clan-tag-static { cursor:default; }
.clan-tag-lg { font-size:14px; padding:2px 8px; vertical-align:middle; }

/* ── Dedicated clan page ── */
.clan-page { padding-bottom: var(--sp-8); }
.clan-back-btn { display:inline-flex; align-items:center; gap:6px; margin:var(--sp-4) var(--sp-5) 0; padding:6px 12px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-full); color:var(--text-secondary); font-size:13px; font-weight:600; cursor:pointer; transition:background var(--transition-fast),color var(--transition-fast); }
.clan-back-btn:hover { background:var(--bg-card-hover); color:var(--text-primary); }
.clan-hero { margin:var(--sp-4) var(--sp-5) 0; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--bg-card); }
.clan-hero-banner { height:120px; }
.clan-hero-body { display:flex; align-items:flex-end; gap:var(--sp-4); padding:0 var(--sp-5) var(--sp-5); margin-top:-34px; flex-wrap:wrap; }
.clan-hero-avatar { width:72px; height:72px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:24px; color:#fff; border:4px solid var(--bg-card); flex-shrink:0; text-transform:uppercase; }
.clan-hero-info { flex:1; min-width:0; padding-bottom:2px; }
.clan-hero-name { font-size:22px; font-weight:800; letter-spacing:-0.02em; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.clan-hero-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; color:var(--text-muted); margin-top:4px; }
.clan-meta-dot { width:3px; height:3px; border-radius:50%; background:var(--text-muted); }
.clan-hero-actions { padding-bottom:4px; }
.clan-page-tabs { display:flex; gap:4px; padding:var(--sp-4) var(--sp-5) 0; border-bottom:1px solid var(--border); margin:var(--sp-4) 0 0; }
.clan-page-tab { background:none; border:none; border-bottom:2px solid transparent; color:var(--text-muted); font-size:14px; font-weight:600; padding:10px 12px; cursor:pointer; transition:color var(--transition-fast); }
.clan-page-tab:hover { color:var(--text-primary); }
.clan-page-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.clan-page-content { padding:var(--sp-4) 0; }
.clan-feed > .post-card:first-child { border-top:none; }
.clan-section-block { padding:var(--sp-2) var(--sp-5) var(--sp-5); }
.clan-section-title { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); margin-bottom:var(--sp-3); display:flex; align-items:center; gap:8px; }
.clan-section-count { background:var(--accent-subtle); color:var(--accent); border-radius:var(--radius-full); padding:1px 8px; font-size:11px; }
.clan-member-list { display:flex; flex-direction:column; gap:2px; }
.clan-member-row { display:flex; align-items:center; gap:12px; padding:8px; border-radius:var(--radius-sm); cursor:pointer; transition:background var(--transition-fast); }
.clan-member-row:hover { background:var(--accent-subtle); }
.clan-member-avatar { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; color:#fff; flex-shrink:0; }
.clan-member-meta { min-width:0; }
.clan-member-name { font-size:14px; font-weight:600; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.clan-member-handle { font-size:12px; color:var(--text-muted); }
.clan-empty-row { padding:12px 8px; font-size:13px; color:var(--text-muted); }
.clan-role-badge { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; padding:1px 7px; border-radius:var(--radius-full); }
.clan-role-owner { background:var(--accent); color:#fff; }
.clan-role-officer { background:var(--accent-soft); color:var(--accent); }
.clan-role-action { margin-left:auto; flex-shrink:0; background:var(--bg-input); border:1px solid var(--border); color:var(--text-secondary); border-radius:var(--radius-full); padding:4px 12px; font-size:12px; font-weight:600; cursor:pointer; transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast); }
.clan-role-action:hover { background:var(--accent-subtle); border-color:var(--border-accent); color:var(--accent); }
.clan-about-text { font-size:14px; color:var(--text-secondary); line-height:1.6; }
.clan-achievements { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:var(--sp-3); }
.clan-achievement { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:var(--sp-4); text-align:center; }
.clan-achievement-value { font-size:16px; font-weight:800; color:var(--text-primary); }
.clan-achievement-label { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; margin-top:4px; }
.clan-name { font-weight:700; font-size:14px; margin-bottom:2px; }
.clan-meta { font-size:12px; color:var(--text-muted); display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.clan-meta svg { opacity:.6; }
.clan-card-desc { font-size:12px; color:var(--text-secondary); margin-top:6px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* Clan image uploads (avatar + banner, required) */
.clan-upload-label { font-size:13px; font-weight:600; color:var(--text-secondary); margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.clan-required { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--accent); background:var(--accent-subtle); border-radius:var(--radius-full); padding:1px 7px; }
.clan-media-uploads { position:relative; margin-bottom:22px; }
.clan-banner-upload {
  display:flex; align-items:center; justify-content:center;
  height:96px; border-radius:var(--radius-sm);
  border:1.5px dashed var(--border-accent); background:var(--bg-input) center/cover no-repeat;
  cursor:pointer; color:var(--text-muted); font-size:13px; transition:border-color var(--transition-fast);
}
.clan-banner-upload:hover { border-color:var(--accent); }
.clan-banner-upload.has-image { border-style:solid; border-color:var(--border); }
.clan-banner-upload.has-image .clan-upload-hint { display:none; }
.clan-avatar-upload {
  position:absolute; left:16px; bottom:-18px;
  width:56px; height:56px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  border:3px solid var(--bg-card); background:var(--bg-elevated) center/cover no-repeat;
  cursor:pointer; box-shadow:var(--shadow-card); transition:transform var(--transition-fast);
}
.clan-avatar-upload:hover { transform:scale(1.04); }
.clan-avatar-upload.has-image .clan-upload-plus { display:none; }
.clan-upload-plus { font-size:22px; font-weight:300; color:var(--accent); line-height:1; }
/* Clan banner picker */
.clan-banner-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: var(--sp-1);
  max-height: 140px;
  overflow-y: auto;
}
.clan-banner-swatch {
  height: 28px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .15s, transform .1s;
}
.clan-banner-swatch:hover { transform: scale(1.08); }
.clan-banner-swatch.active { border-color: #fff; }

.clan-detail-header { position:relative; height:120px; border-radius:12px 12px 0 0; overflow:hidden; }
.clan-detail-body { padding:16px; }
.clan-detail-tabs { display:flex; border-bottom:1px solid var(--border); margin-bottom:16px; }
.clan-detail-tab { padding:10px 20px; font-size:14px; font-weight:600; cursor:pointer; border-bottom:2px solid transparent; color:var(--text-muted); transition:all .2s; }
.clan-detail-tab:hover { color:var(--text-primary); }
.clan-detail-tab.active { border-color:var(--accent); color:var(--text-primary); }
.clan-member-row { display:flex; align-items:center; gap:12px; padding:10px; border-radius:var(--radius); cursor:pointer; transition:background .15s; }
.clan-member-row:hover { background:rgba(255,255,255,.04); }
.clan-member-avatar { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0; }
.my-clan-pill { display:inline-flex; align-items:center; gap:6px; background:rgba(122,126,140,.15); border:1px solid rgba(122,126,140,.3); border-radius:20px; padding:4px 12px; font-size:12px; cursor:pointer; margin:4px; }

/* ===== CHALLENGES WIDGET ===== */
.challenge-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.challenge-item:last-child { border-bottom: none; }
.challenge-icon { font-size: 20px; flex-shrink: 0; }
.challenge-info { flex: 1; min-width: 0; }
.challenge-title { font-size: 13px; font-weight: 600; }
.challenge-desc { font-size: 11px; opacity: .5; }
.challenge-progress-bar { height: 4px; background: rgba(255,255,255,.1); border-radius: 2px; margin-top: 4px; overflow: hidden; }
.challenge-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-light)); border-radius: 2px; transition: width .4s; }
.challenge-claim-btn { background: linear-gradient(135deg, var(--accent), var(--accent-light)); border: none; color: white; border-radius: var(--radius-lg); padding: 4px 10px; font-size: 11px; font-weight: 700; cursor: pointer; flex-shrink: 0; }
.challenge-claim-btn:disabled { background: rgba(255,255,255,.1); cursor: default; }
.challenge-xp { font-size: 11px; font-weight: 700; color: var(--accent-light); flex-shrink: 0; }

/* ================================================================
   DXED CUSTOM VIDEO PLAYER (.dxp)
   ================================================================ */

/* Container */
.dxp {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #000;
  cursor: pointer;
  user-select: none;
  outline: none;
  line-height: 0;
  aspect-ratio: 16 / 9;   /* sensible default before metadata; _fitFrame sets the real one */
}
.dxp-inline {
  margin: 8px 0;
}
.dxp-fullscreen { border-radius: 0; }

/* Video element — 60fps / high-bitrate / up to 4K friendly.
   Horizontal clips: the container takes the video's real ratio (_fitFrame) and
   the video fills it. Vertical clips: the container is height-capped and the
   video is contained (whole clip, centered) while a blurred copy fills the
   sides — no black bars, no crop/zoom, no empty gutters. */
.dxp-video {
  position: relative; z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: transparent;
}
/* blurred fill behind vertical clips */
.dxp-blurbg {
  position: absolute; inset: 0; z-index: 0; display: none;
  background: #050505 center / cover no-repeat;
  filter: blur(30px) brightness(0.5);
  transform: scale(1.2);
}
.dxp-vertical { aspect-ratio: auto; }
.dxp-vertical .dxp-blurbg { display: block; }

/* Fullscreen: ignore the inline aspect-ratio/height the player set for inline use */
.dxp-fullscreen { aspect-ratio: auto !important; max-width: none !important; height: 100% !important; margin: 0 !important; }
.dxp-fullscreen .dxp-blurbg { display: none; }
.dxp-fullscreen .dxp-video { width: 100%; height: 100%; }

/* Poster overlay */
.dxp-poster-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.dxp-poster-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Big play button (initial) */
.dxp-play-big {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  background: rgba(0,0,0,0.25);
  transition: opacity 0.2s;
}
.dxp-play-big:hover { background: rgba(0,0,0,0.35); }
.dxp-play-big svg { filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4)); transition: transform 0.15s; }
.dxp-play-big:hover svg { transform: scale(1.08); }

/* Play/pause state flash */
.dxp-state-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  background: rgba(0,0,0,0.45);
  border-radius: 50%;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s, transform 0.2s;
}
.dxp-state-icon.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.dxp-state-icon .dxp-state-play,
.dxp-state-icon .dxp-state-pause { display: none; }
.dxp-state-icon.playing .dxp-state-play { display: flex; }
.dxp-state-icon.paused .dxp-state-pause { display: flex; }

/* Buffering spinner */
.dxp-buffering {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.dxp-buffering.active { opacity: 1; }
.dxp-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255,255,255,0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: dxp-spin 0.8s linear infinite;
}
@keyframes dxp-spin { to { transform: rotate(360deg); } }

/* Bottom gradient for controls readability */
.dxp-gradient-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
}
.dxp-controls-visible .dxp-gradient-bottom,
.dxp:hover .dxp-gradient-bottom { opacity: 1; }

/* Controls container */
.dxp-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 0 10px 8px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s, transform 0.25s;
}
.dxp-controls-visible .dxp-controls,
.dxp:hover .dxp-controls {
  opacity: 1;
  transform: translateY(0);
}

/* Progress bar */
.dxp-progress {
  position: relative;
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  cursor: pointer;
  margin-bottom: 6px;
  transition: height 0.12s;
}
.dxp-progress:hover,
.dxp-progress.seeking { height: 6px; }
.dxp-progress-buffer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: rgba(255,255,255,0.25);
  border-radius: 2px;
  width: 0;
}
.dxp-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--accent, var(--accent));
  border-radius: 2px;
  width: 0;
  transition: width 0.1s linear;
}
.dxp-progress-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.12s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.dxp-progress:hover .dxp-progress-thumb,
.dxp-progress.seeking .dxp-progress-thumb {
  transform: translate(-50%, -50%) scale(1);
}

/* Hover time tooltip */
.dxp-progress-hover-time {
  position: absolute;
  bottom: 14px;
  left: 0;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.85);
  color: #fff;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  font-family: -apple-system, system-ui, sans-serif;
  line-height: 1.4;
}
.dxp-progress-hover-time.show { opacity: 1; }

/* Controls row */
.dxp-controls-row {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  height: 32px;
}
.dxp-spacer { flex: 1; }

/* Buttons */
.dxp-btn {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
  font-family: -apple-system, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.dxp-btn:hover { background: rgba(255,255,255,0.15); }
.dxp-btn svg { display: block; }

/* Volume */
.dxp-volume-wrap {
  width: 0;
  overflow: hidden;
  transition: width 0.2s ease;
  display: flex;
  align-items: center;
}
.dxp:hover .dxp-volume-wrap,
.dxp-controls-visible .dxp-volume-wrap {
  width: 60px;
}
.dxp-volume-slider {
  width: 56px;
  height: 3px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255,255,255,0.3);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.dxp-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.dxp-volume-slider::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  border: none;
  cursor: pointer;
}

/* Time display */
.dxp-time {
  font-size: 11px;
  color: rgba(255,255,255,0.85);
  font-family: -apple-system, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
  padding: 0 4px;
}
.dxp-time-sep { margin: 0 2px; opacity: 0.5; }

/* Menus (speed / quality) */
.dxp-menu-anchor { position: relative; }
.dxp-menu {
  position: absolute;
  bottom: 36px;
  right: 0;
  background: rgba(20,20,40,0.96);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  padding: 4px 0;
  min-width: 90px;
  display: none;
  backdrop-filter: blur(12px);
  z-index: 20;
}
.dxp-menu.open { display: block; }
.dxp-menu-item {
  padding: 6px 14px;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: background 0.12s;
  white-space: nowrap;
  font-family: -apple-system, system-ui, sans-serif;
  line-height: 1.4;
}
.dxp-menu-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.dxp-menu-item.active { color: var(--accent, var(--accent)); font-weight: 700; }

/* Quality menu items */
.dxp-quality-text {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.9);
  line-height: 1;
}
.dxp-quality-sub {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  margin-left: 6px;
}
.dxp-quality-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  background: var(--accent, var(--accent));
  color: #fff;
  padding: 1px 4px;
  border-radius: 3px;
  margin-left: 6px;
  letter-spacing: 0.5px;
  vertical-align: middle;
}
.dxp-quality-loading {
  color: rgba(255,255,255,0.3);
  font-style: italic;
  pointer-events: none;
}
.dxp-quality-hint {
  color: rgba(255,255,255,0.25);
  font-size: 10px;
  font-style: italic;
  pointer-events: none;
  padding: 4px 14px 6px;
  line-height: 1.3;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 2px;
}
.dxp-menu-item .dxp-quality-label { flex: 1; }
.dxp-quality-menu .dxp-menu-item {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 7px 14px;
}
.dxp-quality-menu { min-width: 140px; }

/* Quality badge on vp-overlay */
.vp-quality-pill {
  font-size: 11px;
  font-weight: 700;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.15s;
  border: none;
  position: relative;
}
.vp-quality-pill:hover { background: rgba(255,255,255,0.2); }
.vp-quality-menu {
  position: absolute;
  bottom: 36px;
  right: 0;
  background: rgba(20,20,40,0.96);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  padding: 4px 0;
  min-width: 140px;
  display: none;
  backdrop-filter: blur(12px);
  z-index: 30;
}
.vp-quality-menu.open { display: block; }
.vp-quality-menu .vp-quality-option {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 7px 14px;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: background 0.12s;
  white-space: nowrap;
  font-family: -apple-system, system-ui, sans-serif;
}
.vp-quality-menu .vp-quality-option:hover { background: rgba(255,255,255,0.08); color: #fff; }
.vp-quality-menu .vp-quality-option.active { color: var(--accent, var(--accent)); font-weight: 700; }
.vp-quality-anchor { position: relative; display: inline-flex; }

/* Muted indicator badge */
.dxp-muted::after {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cline x1='23' y1='1' x2='1' y2='23'/%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3C/svg%3E") center/16px no-repeat;
  z-index: 6;
  opacity: 0;
  transition: opacity 0.2s;
}
.dxp-muted:not(.dxp-controls-visible)::after,
.dxp-muted:not(:hover)::after { opacity: 0.7; }

/* Processing badge for transcoding clips */
.clip-processing-badge {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 12px;
  margin: 4px 0 0;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  background: var(--accent-hover);
  border-radius: var(--radius-xs);
}
.clip-processing-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid var(--accent-strong);
  border-top-color: var(--accent, var(--accent));
  border-radius: 50%;
  animation: dxpSpin 0.8s linear infinite;
}
@keyframes dxpSpin { to { transform: rotate(360deg); } }

/* ===== VIDEO CLIP IN FEED ===== */
.clip-video-wrapper { position: relative; border-radius: var(--radius); overflow: hidden; margin: 8px 0; cursor: pointer; background: var(--bg-elevated); min-height: 180px; }
.post-clip-video { width: 100%; display: block; pointer-events: none; object-fit: contain; border-radius: var(--radius); position: relative; z-index: 1; }
.post-clip-video.playing { pointer-events: auto; }
.clip-video-play-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 100%); transition: opacity 0.2s; z-index: 2;
}
.clip-video-wrapper:hover .clip-video-play-overlay { opacity: 0.9; }
.clip-fs-btn {
  position: absolute; top: 8px; right: 8px; z-index: 10;
  background: rgba(0,0,0,0.6); border: none; border-radius: var(--radius-sm);
  padding: 6px 8px; cursor: pointer; display: flex; align-items: center;
  transition: background 0.2s;
}
.clip-fs-btn:hover { background: rgba(0,0,0,0.85); }

/* ===== CUSTOM VIDEO PLAYER ===== */
.vp-overlay {
  position: fixed; inset: 0; z-index: var(--z-top); background: #000;
  opacity: 0; transition: opacity 0.25s ease;
}
.vp-overlay.visible { opacity: 1; }
.vp-container { width: 100%; height: 100%; position: relative; overflow: hidden; }
.vp-video-area { width: 100%; height: 100%; position: relative; display: flex; align-items: center; justify-content: center; background: #000; }
.vp-video { width: 100%; height: 100%; object-fit: contain; }

/* Gradient overlays */
.vp-gradient-top {
  position: absolute; top: 0; left: 0; right: 0; height: 140px; z-index: 6; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.25) 50%, transparent 100%);
  opacity: 0; transition: opacity 0.35s ease;
}
.vp-gradient-bottom {
  position: absolute; bottom: 0; left: 0; right: 0; height: 280px; z-index: 6; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 40%, transparent 100%);
}
.vp-overlay.controls-visible .vp-gradient-top { opacity: 1; }

/* Tap zones */
.vp-tap-zone { position: absolute; top: 60px; bottom: 60px; z-index: 7; -webkit-tap-highlight-color: transparent; }
.vp-tap-left { left: 0; width: 28%; }
.vp-tap-center { left: 28%; width: 44%; }
.vp-tap-right { right: 0; width: 28%; }

/* Play/pause state icon (center flash) */
.vp-state-icon {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 10; pointer-events: none; opacity: 0;
  width: 68px; height: 68px; border-radius: 50%;
  background: rgba(0,0,0,0.45); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.15s ease, transform 0.2s ease;
}
.vp-state-icon .vp-state-play,
.vp-state-icon .vp-state-pause { display: none; line-height: 0; }
.vp-state-icon.show { opacity: 1; animation: vp-state-pop 0.5s ease forwards; }
.vp-state-icon.playing .vp-state-pause { display: block; }
.vp-state-icon.paused .vp-state-play { display: block; }
.vp-state-icon.paused .vp-state-play { padding-left: 3px; }
@keyframes vp-state-pop {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(0.5); }
  20% { opacity: 1; transform: translate(-50%,-50%) scale(1.1); }
  40% { transform: translate(-50%,-50%) scale(1); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1); }
}

/* Heart particle burst */
.vp-heart-burst { position: absolute; inset: 0; z-index: 11; pointer-events: none; overflow: hidden; }
.vp-heart-particle {
  position: absolute; pointer-events: none;
  animation: vp-heart-fly 0.9s ease forwards;
}
@keyframes vp-heart-fly {
  0% { opacity: 1; transform: translate(0,0) scale(0) rotate(0deg); }
  15% { opacity: 1; transform: translate(0,0) scale(var(--scale)) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.3) rotate(var(--rot)); }
}

/* Skip ripple indicators */
.vp-skip-ripple {
  position: absolute; top: 0; bottom: 0; width: 40%; z-index: 9;
  pointer-events: none; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--sp-1);
  color: white; font-size: 13px; font-weight: 700; opacity: 0;
}
.vp-skip-ripple-left { left: 0; border-radius: 0 50% 50% 0; }
.vp-skip-ripple-right { right: 0; border-radius: 50% 0 0 50%; }
.vp-skip-ripple-bg {
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.08);
  border-radius: inherit;
}
.vp-skip-ripple.show { animation: vp-ripple-flash 0.7s ease forwards; }
.vp-skip-ripple.show .vp-skip-ripple-bg { animation: vp-ripple-bg 0.7s ease forwards; }
@keyframes vp-ripple-flash {
  0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes vp-ripple-bg {
  0% { transform: scale(0.7); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; }
}

/* Top bar */
.vp-top-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 12;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top));
  opacity: 0; transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.vp-overlay.controls-visible .vp-top-bar { opacity: 1; transform: translateY(0); }
.vp-close-btn {
  background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center;
  justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
.vp-close-btn:hover { background: rgba(255,255,255,0.18); }
.vp-top-info { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.vp-user-avatar {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 12px; color: white; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.15);
}
.vp-user-meta { display: flex; flex-direction: column; }
.vp-username { font-size: 13px; font-weight: 700; color: white; line-height: 1.2; }
.vp-handle { font-size: 11px; color: rgba(255,255,255,0.45); }
.vp-game-pill {
  font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.8);
  background: var(--accent-mid); border: 1px solid var(--accent-strong);
  border-radius: var(--radius-xs); padding: 3px 8px; white-space: nowrap;
}
.vp-top-spacer { flex: 1; }
.vp-more-btn {
  background: none; border: none; cursor: pointer; padding: 6px;
  -webkit-tap-highlight-color: transparent; opacity: 0.7; transition: opacity 0.15s;
}
.vp-more-btn:hover { opacity: 1; }

/* Side engagement rail (TikTok-style) */
.vp-rail {
  position: absolute; right: 8px; bottom: 120px; z-index: 12;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.vp-rail-avatar {
  cursor: pointer; margin-bottom: 6px;
}
.vp-rail-avatar-img {
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 14px; color: white;
  border: 2px solid white; box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  transition: transform 0.2s;
}
.vp-rail-avatar-img:hover { transform: scale(1.08); }
.vp-rail-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: none; color: white; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: transform 0.15s;
}
.vp-rail-btn span {
  font-size: 11px; font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.vp-rail-btn:active { transform: scale(0.9); }
.vp-rail-icon {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,0.08); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, transform 0.15s;
}
.vp-rail-icon:hover { background: rgba(255,255,255,0.15); }
.vp-rail-btn svg {
  stroke: white; fill: none; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
}
.vp-rail-btn.active { color: #ef4444; }
.vp-rail-btn.active svg { stroke: #ef4444; fill: #ef4444; }
.vp-rail-btn.active .vp-rail-icon { background: rgba(239,68,68,0.15); }
.vp-btn-pop { animation: vp-btn-pop 0.3s ease; }
@keyframes vp-btn-pop {
  0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); }
}

/* Bottom info area */
.vp-bottom {
  position: absolute; bottom: 50px; left: 14px; right: 70px; z-index: 12;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.vp-desc-area { margin-bottom: 8px; }
.vp-desc-text {
  font-size: 13px; color: rgba(255,255,255,0.9); line-height: 1.5;
  max-height: 40px; overflow: hidden; word-break: break-word;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
  transition: max-height 0.3s ease;
}
.vp-desc-text.expanded { max-height: 300px; }
.vp-desc-more {
  background: none; border: none; color: rgba(255,255,255,0.5); font-size: 13px;
  font-weight: 600; cursor: pointer; padding: 0; margin-top: 2px;
}
.vp-views-row {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: rgba(255,255,255,0.4); font-weight: 500;
}

/* YouTube-style controls bar (bottom) */
.vp-controls {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 14;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  opacity: 1; transition: opacity 0.3s ease;
}
.vp-progress-bar {
  position: relative; height: 3px; background: rgba(255,255,255,0.15);
  cursor: pointer; transition: height 0.15s ease;
  margin: 0 0 0;
}
.vp-progress-bar:hover,
.vp-progress-bar.seeking { height: 6px; }
.vp-progress-buffer {
  position: absolute; top: 0; left: 0; height: 100%; width: 0;
  background: rgba(255,255,255,0.2); border-radius: 0;
}
.vp-progress-fill {
  position: absolute; top: 0; left: 0; height: 100%; width: 0;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(122,126,140,0.4);
}
.vp-progress-thumb {
  position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%) scale(0);
  width: 14px; height: 14px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-strong); transition: transform 0.15s ease;
}
.vp-progress-bar:hover .vp-progress-thumb,
.vp-progress-bar.seeking .vp-progress-thumb { transform: translate(-50%, -50%) scale(1); }
.vp-progress-hover-time {
  position: absolute; bottom: 100%; transform: translateX(-50%);
  background: rgba(0,0,0,0.85); color: white; font-size: 12px; font-weight: 600;
  padding: 3px 8px; border-radius: var(--radius-xs); pointer-events: none;
  opacity: 0; transition: opacity 0.15s; margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.vp-progress-hover-time.show { opacity: 1; }

.vp-controls-row {
  display: flex; align-items: center; gap: 6px; padding: 6px 12px 8px;
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.vp-overlay.controls-visible .vp-controls-row { opacity: 1; transform: translateY(0); }
.vp-ctrl-btn {
  background: none; border: none; cursor: pointer; padding: 6px;
  -webkit-tap-highlight-color: transparent; opacity: 0.9;
  transition: opacity 0.12s, transform 0.12s;
}
.vp-ctrl-btn:hover { opacity: 1; transform: scale(1.1); }
.vp-time-display {
  font-size: 12px; color: rgba(255,255,255,0.7); font-weight: 500;
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.vp-ctrl-spacer { flex: 1; }

/* Comments panel */
.vp-comments-panel {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 30;
  background: rgba(12,12,24,0.97); backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: var(--radius-lg) 20px 0 0; max-height: 60vh; display: flex; flex-direction: column;
  transform: translateY(0); transition: transform 0.35s cubic-bezier(0.32,0.72,0,1);
  box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
}
.vp-comments-panel.hidden { transform: translateY(100%); pointer-events: none; }
.vp-comments-drag-handle {
  width: 36px; height: 4px; border-radius: 3px; background: rgba(255,255,255,0.15);
  margin: 10px auto 4px; flex-shrink: 0;
}
.vp-comments-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 18px 12px; border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 15px; font-weight: 700; color: white;
}
.vp-comments-close {
  background: rgba(255,255,255,0.08); border: none; border-radius: 50%;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); cursor: pointer; transition: background 0.15s;
}
.vp-comments-close:hover { background: rgba(255,255,255,0.15); }
.vp-comments-body {
  flex: 1; overflow-y: auto; padding: 10px 14px;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
}

/* ===== PREVIEW MODE ===== */
.preview-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-top);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.preview-banner-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
  animation: preview-pulse 2s ease-in-out infinite;
}
@keyframes preview-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.preview-banner-sep { opacity: 0.4; font-size: 10px; }
.preview-banner-sub { font-weight: 400; opacity: 0.8; }

/* ===== ADMIN PANEL ===== */
.nav-item-admin { border-top: 1px solid rgba(255,255,255,0.04); margin-top: 6px; padding-top: 6px; }
.nav-item-admin svg { fill: none; stroke: currentColor; stroke-width: 2; }
.nav-item-admin.active, .nav-item-admin:hover { color: var(--accent); }

/* Admin Testers Tab */
.adm-preview-links { display: flex; flex-direction: column; gap: var(--sp-2); }
.adm-preview-link { background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 14px; transition: opacity 0.15s; }
.adm-preview-link.disabled { opacity: 0.5; }
.adm-preview-link-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); margin-bottom: 10px; }
.adm-preview-link-label { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.adm-preview-link-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.adm-preview-link-actions { display: flex; gap: 6px; flex-shrink: 0; }
.adm-preview-link-url { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-xs); padding: 8px 12px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); transition: border-color 0.15s; }
.adm-preview-link-url:hover { border-color: var(--text-muted); }
.adm-preview-link-url code { font-size: 11px; color: var(--text-secondary); word-break: break-all; font-family: monospace; }
.adm-preview-copy-hint { font-size: 10px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }

/* ── Admin console shell ── */
/* The console needs the FULL width: hide the right sidebar and let the
   center column span, exactly like Communities/Messages — inside the
   narrow feed column the 216px nav + content grid was getting cut off. */
body[data-section="admin"] #app { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
body[data-section="admin"] #right-sidebar { display: none; }

.adm-shell { max-width: 1180px; margin: 0 auto; min-width: 0; }
.adm-header {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding: 4px 2px 18px; margin-bottom: 22px; flex-wrap: wrap;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.adm-header-titles h1 { font-size: 23px; font-weight: 800; color: var(--text-primary); margin: 0; letter-spacing: -0.02em; }
.adm-header-titles p { font-size: 13px; color: var(--text-muted); margin: 5px 0 0; }
.adm-studio-btn {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  padding: 9px 16px; border-radius: var(--radius-full); font-size: 13px; font-weight: 700;
  color: var(--accent-light); background: var(--accent-soft);
  border: 1px solid var(--accent-mid); transition: all 0.15s; white-space: nowrap;
}
.adm-studio-btn:hover { background: var(--accent-hover); transform: translateY(-1px); }
.adm-studio-btn svg { width: 17px; height: 17px; }

.adm-layout { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 26px; align-items: start; }
.adm-nav { display: flex; flex-direction: column; gap: 3px; position: sticky; top: 16px; }
.adm-nav-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 10px 13px; border-radius: var(--radius-sm); border: 1px solid transparent;
  background: transparent; color: var(--text-muted); font-size: 13.5px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all 0.14s; position: relative;
}
.adm-nav-item svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.8; transition: opacity 0.14s; }
.adm-nav-item:hover { background: rgba(255,255,255,0.04); color: var(--text-primary); }
.adm-nav-item:hover svg { opacity: 1; }
.adm-nav-item.active {
  background: var(--accent-soft); color: var(--accent-light); border-color: var(--accent-mid);
}
.adm-nav-item.active svg { opacity: 1; }
.adm-nav-item.active::before {
  content: ''; position: absolute; left: -1px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 2px; background: var(--accent-light);
}
.adm-main { min-width: 0; overflow-x: auto; }

/* Narrow screens: the sidebar nav becomes a horizontal scrollable strip so
   the console content keeps the full width instead of being crushed. */
@media (max-width: 900px) {
  .adm-layout { grid-template-columns: 1fr; gap: 14px; }
  .adm-nav {
    position: static; flex-direction: row; overflow-x: auto; gap: 6px;
    padding-bottom: 6px; scrollbar-width: thin;
  }
  .adm-nav-item { flex: 0 0 auto; white-space: nowrap; }
  .adm-header { flex-wrap: wrap; gap: 10px; }
}

/* Stats grid */
.adm-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.adm-stat-card {
  background: var(--bg-card); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius);
  padding: 18px 20px; position: relative; overflow: hidden; transition: border-color 0.15s, transform 0.15s;
}
.adm-stat-card:hover { border-color: rgba(255,255,255,0.13); transform: translateY(-2px); }
.adm-stat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
}
.adm-stat-purple::before { background: linear-gradient(90deg, #8b5cf6, #a855f7); }
.adm-stat-blue::before { background: linear-gradient(90deg, #0ea5e9, #6366f1); }
.adm-stat-green::before { background: linear-gradient(90deg, #14b8a6, #22c55e); }
.adm-stat-amber::before { background: linear-gradient(90deg, #f59e0b, #ef4444); }
.adm-stat-icon { margin-bottom: 12px; color: var(--text-muted); opacity: 0.85; }
.adm-stat-val { font-size: 29px; font-weight: 800; color: var(--text-primary); line-height: 1; letter-spacing: -0.02em; }
.adm-stat-label { font-size: 12px; color: var(--text-muted); font-weight: 600; margin-top: 6px; }
.adm-stat-sub { font-size: 11px; color: rgba(255,255,255,0.3); margin-top: 6px; }

/* Cards */
.adm-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: 16px; }
@media (max-width: 640px) { .adm-row { grid-template-columns: 1fr; } }
.adm-card {
  background: var(--bg-card); border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius); padding: 20px; margin-bottom: 16px;
}
.adm-card-title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 16px; letter-spacing: -0.01em; }

/* Crypto project application status */
.cryapp-status { background: var(--bg-card); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius); padding: 16px 18px; }
.cryapp-status-head { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--text-primary); margin-bottom: 6px; }
.cryapp-badge { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; border: 1px solid; }
.cryapp-status p { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin: 0; }

/* Likebot (owner-only) */
.lb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 4px; }
.lb-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 13px; }
.lb-row:last-child { border-bottom: none; }
.lb-row-main { flex: 1; color: var(--text-secondary); line-height: 1.5; }
.lb-snippet { display: block; color: var(--text-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; margin-top: 2px; }
.lb-mini { padding: 6px 12px; font-size: 12px; }
.lb-empty { color: var(--text-muted); font-size: 13px; padding: 10px 0; }
.lb-preview { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius-sm); padding: 12px 14px; margin: 4px 0 12px; }
.lb-preview-body { font-size: 13px; color: var(--text-primary); margin-bottom: 6px; line-height: 1.5; }
.lb-preview-meta { font-size: 12px; color: var(--text-muted); }
@media (max-width: 600px) { .lb-grid { grid-template-columns: 1fr; } }

/* Plan bars */
.adm-plan-bars { display: flex; flex-direction: column; gap: var(--sp-3); }
.adm-plan-row { display: flex; align-items: center; gap: 10px; }
.adm-plan-label { font-size: 12px; font-weight: 600; min-width: 56px; color: var(--text-muted); }
.adm-plan-bar { flex: 1; height: 8px; background: rgba(255,255,255,0.06); border-radius: var(--radius-xs); overflow: hidden; }
.adm-plan-fill { height: 100%; border-radius: var(--radius-xs); transition: width 0.5s ease; }
.adm-plan-count { font-size: 12px; font-weight: 700; color: white; min-width: 30px; text-align: right; }

/* Misc stats */
.adm-misc-stats { display: flex; flex-direction: column; gap: 10px; }
.adm-misc-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-muted); padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.adm-misc-row strong { color: white; }

/* Growth chart */
.adm-growth-chart { display: flex; align-items: flex-end; gap: 6px; height: 100px; padding: 10px 0; }
.adm-growth-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); }
.adm-growth-bar { width: 100%; background: linear-gradient(to top, var(--accent), var(--accent-light)); border-radius: var(--radius-xs) 4px 0 0; min-height: 4px; transition: height 0.3s ease; }
.adm-growth-label { font-size: 9px; color: var(--text-muted); }

/* Top list */
.adm-top-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.adm-top-item {
  display: flex; align-items: center; gap: 10px; padding: 8px; cursor: pointer;
  border-radius: var(--radius-sm); transition: background 0.15s;
}
.adm-top-item:hover { background: rgba(255,255,255,0.04); }
.adm-top-rank { font-size: 14px; font-weight: 800; color: var(--text-muted); min-width: 20px; }
.adm-top-avatar {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 12px; color: white; flex-shrink: 0;
}
.adm-top-name { font-size: 13px; font-weight: 700; color: white; flex: 1; }
.adm-top-count { font-size: 12px; color: var(--text-muted); }

/* Users table */
.adm-toolbar { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: 14px; }
.adm-search-wrap {
  flex: 1; display: flex; align-items: center; gap: var(--sp-2);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm); padding: 8px 14px;
}
.adm-search {
  flex: 1; background: none; border: none; color: white; font-size: 13px;
  outline: none; font-family: inherit;
}
.adm-search::placeholder { color: var(--text-muted); }
.adm-count { font-size: 12px; color: var(--text-muted); font-weight: 600; white-space: nowrap; }

.adm-users-table { border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius); overflow: hidden; }
.adm-table-head {
  display: flex; align-items: center; padding: 10px 16px;
  background: rgba(255,255,255,0.03); border-bottom: 1px solid rgba(255,255,255,0.06);
}
.adm-th { flex: 1; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.adm-table-row {
  display: flex; align-items: center; padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  transition: background 0.1s;
}
.adm-table-row:last-child { border-bottom: none; }
.adm-table-row:hover { background: rgba(255,255,255,0.02); }
.adm-td { flex: 1; font-size: 13px; }
.adm-user-av {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 12px; color: white; flex-shrink: 0;
}
.adm-select {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm); color: white; font-size: 11px; padding: 5px 8px;
  cursor: pointer; outline: none; font-family: inherit;
}
.adm-select option { background: #1c1d23; color: white; }
.adm-status { font-size: 11px; font-weight: 600; }
.adm-online { color: #22c55e; }
.adm-offline { color: var(--text-muted); }

.adm-btn {
  padding: 6px 12px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04); color: white; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all 0.15s; font-family: inherit; display: inline-flex;
  align-items: center; gap: var(--sp-1);
}
.adm-btn:hover { background: rgba(255,255,255,0.08); }
.adm-btn-warn { border-color: rgba(245,158,11,0.2); color: #fbbf24; }
.adm-btn-warn:hover { background: rgba(245,158,11,0.1); }
.adm-btn-danger { border-color: rgba(239,68,68,0.2); color: #f87171; }
.adm-btn-danger:hover { background: rgba(239,68,68,0.1); }

.adm-pagination { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); padding: 16px; }
.adm-page-info { font-size: 12px; color: var(--text-muted); }

/* Admin: Crypto Projects management */
.adm-cp-panel { padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px; margin: 0 0 14px; background: var(--bg-card); }
.adm-cp-h { margin: 0 0 4px; font-size: 15px; font-weight: 800; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.adm-cp-count { font-size: 12px; font-weight: 700; color: #c4b5fd; background: rgba(139,92,246,.16); border: 1px solid rgba(139,92,246,.34); padding: 1px 9px; border-radius: 999px; }
.adm-cp-sub { margin: 0 0 12px; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.adm-cp-results { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.adm-cp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg-secondary); }
.adm-cp-user { display: flex; align-items: center; gap: 10px; min-width: 0; cursor: pointer; flex: 1; }
.adm-cp-av { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; color: #fff; overflow: hidden; }
.adm-cp-name { display: flex; align-items: center; gap: 5px; font-weight: 700; font-size: 13.5px; color: var(--text-primary); }
.adm-cp-handle { font-size: 11.5px; color: var(--text-muted); }
.adm-cp-ca { font-family: ui-monospace, monospace; color: var(--text-secondary); }
.adm-cp-noca { color: #fbbf24; }
.adm-cp-make { font-size: 12px; padding: 7px 13px; flex-shrink: 0; }
.adm-cp-actions { display: flex; gap: 6px; flex-shrink: 0; }
.adm-cp-empty { padding: 16px; text-align: center; font-size: 12.5px; color: var(--text-muted); }
.adm-cp-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.adm-cp-standalone { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: #c4b5fd; background: rgba(139,92,246,.16); border: 1px solid rgba(139,92,246,.34); padding: 1px 6px; border-radius: 999px; }

/* Account switcher */
.acct-modal { max-width: 420px; }
.acct-list { display: flex; flex-direction: column; gap: 6px; }
.acct-row { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-secondary); cursor: pointer; transition: border-color .15s, background .15s; }
.acct-row:hover { border-color: var(--accent); background: var(--bg-card-hover, rgba(255,255,255,.03)); }
.acct-row.active { cursor: default; border-color: rgba(139,92,246,.4); background: rgba(139,92,246,.07); }
.acct-av { width: 42px; height: 42px; min-width: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; color: #fff; overflow: hidden; }
.acct-av.va-square { border-radius: 12px; }
.acct-meta { flex: 1; min-width: 0; }
.acct-name { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-handle { font-size: 12px; color: var(--text-muted); }
.acct-tag { font-size: 9.5px; font-weight: 700; text-transform: uppercase; color: #c4b5fd; background: rgba(139,92,246,.16); border: 1px solid rgba(139,92,246,.34); padding: 1px 6px; border-radius: 999px; }
.acct-active-dot { font-size: 11px; font-weight: 700; color: var(--accent-green, #26d07c); }
.acct-switch-cta { font-size: 12px; font-weight: 700; color: var(--accent); }
.acct-remove { margin-left: 6px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(255,255,255,.06); color: var(--text-muted); cursor: pointer; font-size: 12px; }
.acct-remove:hover { background: rgba(239,68,68,.15); color: #f87171; }
.acct-divider { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); margin: 16px 0 8px; }
.acct-add { width: 100%; justify-content: center; margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; }
.acct-stay { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12px; color: var(--text-muted); }
.acct-stay input { accent-color: var(--accent); }
.acct-err { color: #f87171; font-size: 12.5px; min-height: 16px; margin: 6px 0; }

/* Content list */
.adm-content-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.adm-content-item {
  padding: 14px; border: 1px solid rgba(255,255,255,0.04); border-radius: var(--radius);
  background: rgba(255,255,255,0.02);
}
.adm-content-meta { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 8px; font-size: 13px; color: white; }
.adm-content-body { font-size: 13px; color: rgba(255,255,255,0.7); line-height: 1.5; word-break: break-word; }
.adm-content-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }

/* Badge reference grid */
.adm-badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.adm-badge-card {
  display: flex; align-items: center; gap: var(--sp-3); padding: 12px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius); transition: background 0.15s;
}
.adm-badge-card:hover { background: rgba(255,255,255,0.06); }
.adm-badge-preview { flex-shrink: 0; }
.adm-badge-name { font-size: 13px; font-weight: 700; color: white; }
.adm-badge-key { font-size: 10px; color: var(--text-muted); font-family: monospace; }
.adm-badge-color { font-size: 10px; font-weight: 600; }

/* Mobile admin more menu */
.mobile-more-admin svg { fill: none; stroke: currentColor; stroke-width: 2; }

/* Sidebar collapses to a horizontal scroll rail on narrower screens */
@media (max-width: 900px) {
  .adm-layout { grid-template-columns: 1fr; gap: 16px; }
  .adm-nav {
    position: static; flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: 6px; padding-bottom: 10px; margin-bottom: 2px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    scrollbar-width: none;
  }
  .adm-nav::-webkit-scrollbar { display: none; }
  .adm-nav-item { flex-shrink: 0; padding: 8px 13px; }
  .adm-nav-item.active::before { display: none; }
}

/* Admin panel mobile responsiveness */
@media (max-width: 768px) {
  .adm-header { padding-bottom: 14px; margin-bottom: 16px; }
  .adm-header-titles h1 { font-size: 20px; }
  .adm-nav-item span { font-size: 12.5px; }
  .adm-stats-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .adm-stat-card { padding: 14px; }
  .adm-stat-val { font-size: 22px; }
  .adm-stat-label { font-size: 11px; }
  .adm-row { grid-template-columns: 1fr; gap: 10px; }
  .adm-card { padding: 14px; }

  /* Users table -> card layout on mobile */
  .adm-table-head { display: none; }
  .adm-table-row {
    flex-direction: column; align-items: stretch; gap: 10px;
    padding: 14px; border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .adm-td { flex: unset !important; }
  .adm-td:first-child { margin-bottom: 4px; }
  .adm-table-row .adm-td:nth-child(2),
  .adm-table-row .adm-td:nth-child(3) { display: inline-flex; align-items: center; gap: 6px; }
  .adm-table-row .adm-td:nth-child(2)::before { content: 'Plan: '; font-size: 11px; color: var(--text-muted); font-weight: 600; }
  .adm-table-row .adm-td:nth-child(3)::before { content: 'Badge: '; font-size: 11px; color: var(--text-muted); font-weight: 600; }
  .adm-table-row .adm-td:last-child { display: flex; justify-content: flex-end; gap: var(--sp-2); padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.04); }

  .adm-toolbar { flex-direction: column; gap: var(--sp-2); }
  .adm-count { align-self: flex-end; }

  .adm-growth-chart { overflow-x: auto; min-width: 0; }
  .adm-growth-bar-wrap { min-width: 28px; }
  .adm-growth-label { font-size: 8px; }

  .adm-badges-grid { grid-template-columns: 1fr 1fr; }
  .adm-badge-card { padding: 10px; gap: var(--sp-2); }

  .adm-content-item { padding: 12px; }
}

@media (max-width: 400px) {
  .adm-stats-grid { grid-template-columns: 1fr; }
  .adm-badges-grid { grid-template-columns: 1fr; }
  .adm-stat-card { padding: 12px; }
}

/* ===== SHARE PROFILE SHEET ===== */
.sp-overlay {
  position: fixed; inset: 0; z-index: var(--z-top);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity 0.3s ease;
}
.sp-overlay.visible { opacity: 1; }
.sp-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
}
.sp-sheet {
  position: relative; z-index: 1;
  width: 100%; max-width: 420px;
  background: #12121a; border-radius: var(--radius-lg) 20px 0 0;
  border: 1px solid rgba(255,255,255,0.06); border-bottom: none;
  padding: 0 0 env(safe-area-inset-bottom, 16px);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32,0.72,0,1);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
  max-height: 90vh; overflow-y: auto;
}
.sp-overlay.visible .sp-sheet { transform: translateY(0); }
.sp-drag-handle {
  width: 36px; height: 4px; border-radius: 3px;
  background: rgba(255,255,255,0.12); margin: 10px auto 0;
}
.sp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px 8px;
}
.sp-title { font-size: 16px; font-weight: 700; color: white; }
.sp-close {
  background: rgba(255,255,255,0.06); border: none; border-radius: 50%;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.5); cursor: pointer; transition: background 0.15s;
}
.sp-close:hover { background: rgba(255,255,255,0.12); }

/* Profile card preview */
.sp-card {
  margin: 8px 18px 16px; border-radius: var(--radius-md); overflow: hidden;
  background: #1a1a28; border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.sp-card-banner {
  height: 72px; position: relative; overflow: hidden;
}
.sp-card-pattern {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent, transparent 8px,
    rgba(255,255,255,0.03) 8px, rgba(255,255,255,0.03) 16px
  );
}
.sp-card-body {
  padding: 0 20px 18px; text-align: center; margin-top: -28px;
}
.sp-card-avatar {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 20px; color: white;
  border: 3px solid #1a1a28; box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.sp-card-name {
  font-size: 16px; font-weight: 800; color: white; line-height: 1.2;
}
.sp-card-handle {
  font-size: 13px; color: rgba(255,255,255,0.4); margin-top: 2px;
}
.sp-card-stats {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  margin-top: 10px; font-size: 13px; color: rgba(255,255,255,0.5);
}
.sp-card-stats strong { color: white; font-weight: 700; }
.sp-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255,255,255,0.2);
}
.sp-card-url {
  margin-top: 10px; font-size: 11px; color: rgba(122,126,140,0.7);
  font-family: monospace; font-weight: 600;
  background: var(--accent-subtle); border-radius: var(--radius-sm); padding: 5px 12px;
  display: inline-block;
}

/* Share action buttons */
.sp-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 0 18px 18px;
}
.sp-action-btn {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius); padding: 16px 12px;
  color: rgba(255,255,255,0.7); cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
  font-size: 12px; font-weight: 600; font-family: inherit;
}
.sp-action-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.1);
}
.sp-action-btn:active { transform: scale(0.96); }
.sp-action-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.sp-action-btn:hover .sp-action-icon { background: rgba(255,255,255,0.1); }
.sp-x-icon { color: white; }
.sp-copied { border-color: rgba(34,197,94,0.3) !important; }
.sp-copied .sp-action-icon {
  background: rgba(34,197,94,0.15) !important;
  color: #22c55e !important;
}
.sp-copied span { color: #22c55e !important; }

/* QR code display */
.sp-qr-display {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 0 18px 16px;
  animation: sp-qr-in 0.3s ease;
}
@keyframes sp-qr-in {
  0% { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}
.sp-qr-label {
  font-size: 12px; color: rgba(255,255,255,0.35); font-weight: 600;
}

/* Desktop centering */
@media (min-width: 480px) {
  .sp-sheet {
    border-radius: var(--radius-lg); border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 10vh;
    max-height: 80vh;
  }
  .sp-overlay { align-items: center; }
  .sp-overlay.visible .sp-sheet {
    transform: translateY(0);
    animation: sp-sheet-desktop 0.35s cubic-bezier(0.32,0.72,0,1);
  }
  @keyframes sp-sheet-desktop {
    0% { opacity: 0; transform: translateY(30px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }
}

/* ===== HASHTAGS & MENTIONS ===== */
.post-hashtag { color: var(--accent-light); cursor: pointer; font-weight: 600; }
.post-hashtag:hover { text-decoration: underline; }
/* Mentions are bolder + more saturated than plain links so @handles never blend
   into adjacent website/URL links. */
.post-mention { color: var(--accent); cursor: pointer; font-weight: 700; }
.post-mention:hover { text-decoration: underline; }
.post-link { color: var(--accent-light); cursor: pointer; word-break: break-word; }
.post-link:hover { text-decoration: underline; }

/* DXED post link preview — a clean box with the post's thumbnail + author */
.dxed-link-card:empty { display: none; }
.dxed-link-card-box { display: flex; align-items: stretch; gap: 0; margin-top: 10px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--bg-elevated); cursor: pointer; transition: border-color .15s, background .15s; max-width: 440px; }
.dxed-link-card-box:hover { border-color: var(--border-accent); background: var(--accent-subtle); }
.dxed-link-card-thumb { width: 92px; min-width: 92px; background-size: cover; background-position: center; background-color: var(--bg-secondary); position: relative; }
.dxed-link-card-thumb-vid video { width: 100%; height: 100%; object-fit: cover; display: block; }
.dxed-link-card-play { position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; background: rgba(0,0,0,.55); border-radius: 50%; }
.dxed-link-card-main { flex: 1; min-width: 0; padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; }
.dxed-link-card-head { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.dxed-link-card-av { width: 20px; height: 20px; min-width: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #fff; }
.dxed-link-card-name { font-weight: 700; color: var(--text-primary); display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dxed-link-card-brand { margin-left: auto; font-size: 10px; font-weight: 800; letter-spacing: .5px; color: var(--text-muted); }
.dxed-link-card-text { font-size: 13px; color: var(--text-secondary); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hashtag-trending-pill { display: inline-block; background: rgba(122,126,140,.08); border: 1px solid rgba(122,126,140,.12); border-radius: 7px; padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--accent-light); cursor: pointer; margin: 3px; transition: all .15s; }
.hashtag-trending-pill:hover { background: rgba(122,126,140,.15); border-color: rgba(122,126,140,.25); }

/* ===== NOW PLAYING BADGE ===== */
.now-playing-badge { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: 10px; color: #22c55e; font-weight: 600; background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.1); border-radius: 5px; padding: 2px 8px; }
.now-playing-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.85); animation: none; }
@keyframes nowPlayingPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ===== PROFILE BANNER (edit profile modal context) ===== */
.profile-banner-placeholder { width: 100%; height: 140px; border-radius: var(--radius) var(--radius) 0 0; }

/* ===== INPUT FIELD (shared) ===== */
.input-field { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 14px; color: inherit; outline: none; width: 100%; box-sizing: border-box; transition: border-color .15s, background .15s; font-family: inherit; }
.input-field:focus { border-color: rgba(122,126,140,.35); background: rgba(255,255,255,.05); }

/* ===== COMPOSE ACTION BTN (legacy, kept for compatibility) ===== */

/* ===== MODAL CLOSE BUTTON ===== */
.modal-close { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 20px; line-height: 1; padding: 4px 8px; }

/* ================================================================
   GOLD VERIFIED BADGE (PRO)
   ================================================================ */
.verified-gold {
  background: var(--accent) !important; color: #fff !important;
  color: #000 !important;
  box-shadow: 0 0 10px rgba(251,191,36,0.45);
}
.verified-gold.verified-lg {
  box-shadow: none;
}

/* ================================================================
   HOME SEARCH BAR
   ================================================================ */
.home-search-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-bottom: 4px;
}
.home-search-bar:hover {
  border-color: var(--accent-mid);
  background: rgba(255,255,255,0.04);
}
.home-search-bar svg { color: rgba(255,255,255,0.3); flex-shrink: 0; }
.home-search-bar span { color: rgba(255,255,255,0.3); font-size: 14px; }

/* ================================================================
   AVATAR CROPPER
   ================================================================ */
.avatar-crop-modal {
  background: var(--bg-card);
  border-radius: var(--radius);
  width: 420px;
  max-width: 95vw;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.avatar-crop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.avatar-crop-header h3 { font-size: 16px; font-weight: 700; }
.avatar-crop-body { padding: 20px; display: flex; flex-direction: column; gap: var(--sp-4); }
.avatar-crop-container {
  width: 100%;
  height: 300px;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: #000;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-crop-container:active { cursor: grabbing; }
.avatar-crop-container canvas {
  width: 100%;
  height: 300px;
  cursor: grab;
  border-radius: var(--radius-sm);
  user-select: none;
}
.avatar-crop-container canvas:active { cursor: grabbing; }
.avatar-crop-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.avatar-crop-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--border);
  border-radius: 99px;
  outline: none;
}
.avatar-crop-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}
.avatar-crop-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
}
/* live circular preview + hint */
.avatar-crop-preview-row { display: flex; align-items: center; gap: 12px; margin: 12px 0 4px; }
.avatar-crop-live {
  width: 56px; height: 56px; border-radius: 22%; flex: none;
  background: var(--bg-secondary, #0b0c0f); background-size: cover; background-position: center;
  border: 2px solid var(--border-strong, rgba(255,255,255,0.14)); box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.avatar-crop-hint { font-size: 12px; line-height: 1.4; color: var(--text-muted); }
/* zoom +/- buttons flanking the slider */
.avatar-crop-zoombtn {
  width: 30px; height: 30px; flex: none; border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1;
  background: var(--bg-secondary, #0b0c0f); border: 1px solid var(--border); color: var(--text-secondary, #a1a1a1);
  transition: color .15s, border-color .15s;
}
.avatar-crop-zoombtn:hover { color: var(--text-primary); border-color: var(--border-strong, rgba(255,255,255,0.18)); }

/* ================================================================
   CLIPS PAGE
   ================================================================ */
.clips-game-filter {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
}
.clips-game-filter .game-select { flex: 1; }
.clips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-4);
  padding: 16px 20px;
}
.clip-card {
  background: var(--bg-card);
  border-radius: var(--card-radius);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition);
  border: 1px solid var(--border);
}
.clip-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-muted);
  background: var(--bg-card-hover);
}
.clip-card-thumb {
  position: relative;
  aspect-ratio: 16/9;
  background: #0a0a18;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.clip-card-thumb video { width: 100%; height: 100%; object-fit: cover; }
.clip-card-placeholder { font-size: 40px; opacity: .3; }
.clip-card-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 44px;
  height: 44px;
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .2s;
}
.clip-card:hover .clip-card-play { opacity: 1; }
.clip-card-game {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(0,0,0,0.7);
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  backdrop-filter: blur(4px);
}
.clip-card-info {
  display: flex;
  gap: 10px;
  padding: 12px;
}
.clip-card-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: white;
}
.clip-card-meta { flex: 1; min-width: 0; }
.clip-card-title {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}
.clip-card-sub {
  font-size: 12px;
  color: var(--text-muted);
}
.clip-card-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,0.8);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}

/* Clip Upload Zone */
.clip-upload-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 30px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  position: relative;
}
.clip-upload-zone:hover {
  border-color: var(--accent);
  background: rgba(122,126,140,0.05);
}

/* ================================================================
   MONTAGES PAGE
   ================================================================ */
.montage-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.montage-filters { display: flex; gap: var(--sp-2); flex: 1; min-width: 0; }
.montage-filters .game-select { flex: 1; min-width: 0; }
.montages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-4); padding: var(--sp-5);
  align-content: start;
}
/* Empty / error / loading states should center across the whole grid, not sit
   in the first column (this is what made the montages view look off-center). */
.montages-grid > .empty-state { grid-column: 1 / -1; }
.montage-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--card-radius); overflow: hidden;
  cursor: pointer; transition: all var(--transition);
}
.montage-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-muted);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.montage-card-thumb {
  position: relative; aspect-ratio: 16/9;
  background: #0a0a14; overflow: hidden;
}
.montage-card-thumb video,
.montage-card-video { width: 100%; height: 100%; object-fit: cover; }
.montage-card-placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; background: var(--bg-card);
}
.montage-card-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--transition-fast);
}
.montage-card:hover .montage-card-play { opacity: 1; }
.montage-card-tags {
  position: absolute; bottom: var(--sp-2); left: var(--sp-2);
  display: flex; gap: var(--sp-1);
}
.montage-card-game, .montage-card-type {
  background: rgba(0,0,0,0.7); color: #fff;
  font-size: var(--text-2xs); font-weight: 600;
  padding: 3px 8px; border-radius: var(--radius-xs);
  backdrop-filter: blur(4px); text-transform: capitalize;
}
.montage-card-type { background: var(--accent-strong); color: var(--accent-light); }
.montage-card-info {
  display: flex; gap: var(--sp-3); padding: var(--sp-3);
}
.montage-card-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  flex-shrink: 0; display: flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 700; color: #fff;
}
.montage-card-meta { flex: 1; min-width: 0; }
.montage-card-title {
  font-size: var(--text-base); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 2px;
}
.montage-card-author {
  font-size: var(--text-xs); color: var(--text-muted);
}
.montage-card-song {
  font-size: var(--text-2xs); color: var(--accent-light);
  display: block; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.montage-card-stats {
  display: flex; gap: var(--sp-4);
  padding: 0 var(--sp-3) var(--sp-3);
  font-size: var(--text-xs); color: var(--text-muted);
}

@media (max-width: 768px) {
  .montages-grid {
    grid-template-columns: 1fr;
    padding: var(--sp-3);
  }
  .montage-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .montage-filters { flex-direction: column; }
}

/* ================================================================
   SEARCH RESULTS — Games, Players, Posts
   ================================================================ */
.search-section-title {
  font-size: 14px;
  font-weight: 700;
  padding: 16px 20px 8px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Game cards in search */
.search-games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--sp-3);
  padding: 0 20px 16px;
}
.search-game-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition), border-color var(--transition);
}
.search-game-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}
.search-game-cover {
  width: 100%;
  height: 80px;
  object-fit: cover;
  display: block;
}
.search-game-cover-placeholder {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}
.search-game-card-info { padding: 10px 12px; }
.search-game-card-name { font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.search-game-card-meta { font-size: 11px; color: var(--text-muted); }

/* Player cards in search */
.search-players-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 20px 16px;
}
.search-player-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition);
}
.search-player-card:hover { background: rgba(255,255,255,0.03); }
.search-player-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: white;
}
.search-player-info { flex: 1; min-width: 0; }
.search-player-name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.search-player-handle { font-size: 12px; color: var(--text-muted); }
.search-player-bio { font-size: 12px; color: var(--text-secondary); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Reconnecting Banner */
#reconnecting-banner {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-top);
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lift);
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.reconnect-spinner {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--border); border-top-color: var(--text-secondary);
  animation: reconnect-spin 0.8s linear infinite;
}
@keyframes reconnect-spin { to { transform: rotate(360deg); } }

/* ── Sign-up gate (guest restricted action) ── */
.signup-gate-overlay {
  position: fixed; inset: 0; z-index: 7000; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.66); backdrop-filter: blur(4px); padding: 20px; opacity: 0; transition: opacity .18s;
}
.signup-gate-overlay.visible { opacity: 1; }
.signup-gate {
  width: 100%; max-width: 380px; text-align: center;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift); padding: 32px 28px 24px;
  transform: translateY(10px) scale(0.98); transition: transform .2s;
}
.signup-gate-overlay.visible .signup-gate { transform: translateY(0) scale(1); }
.signup-gate-mark { font-weight: 900; letter-spacing: 3px; font-size: 18px; color: var(--accent-light); margin-bottom: 16px; }
.signup-gate-title { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); margin: 0 0 10px; }
.signup-gate-body { font-size: 14px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 22px; }
.signup-gate-actions { display: flex; flex-direction: column; gap: 9px; }
.signup-gate-actions .btn-primary, .signup-gate-actions .btn-secondary { width: 100%; height: 44px; font-size: 14px; }
.signup-gate-keep { margin-top: 14px; background: none; border: none; color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px; }
.signup-gate-keep:hover { color: var(--text-primary); }

/* ================================================================
   ANIMATED AVATAR FRAME — plus/pro subscribers (50+ styles)
   ================================================================ */
@keyframes avatar-frame-spin {
  from { --angle: 0deg; }
  to { --angle: 360deg; }
}
@keyframes avatar-frame-pulse {
  0%, 100% { box-shadow: 0 0 8px var(--frame-glow, rgba(122,126,140,.4)); }
  50% { box-shadow: 0 0 18px var(--frame-glow, rgba(122,126,140,.7)); }
}
@keyframes avatar-frame-breathe {
  0%, 100% { padding: 3px; }
  50% { padding: 4px; }
}
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.avatar-frame-animated {
  position: relative;
  display: inline-block;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(from var(--angle), var(--accent), #3b82f6, #06b6d4, #22c55e, #f59e0b, #ef4444, #ec4899, var(--accent));
  animation: avatar-frame-spin 3s linear infinite;
}
.avatar-frame-animated.frame-pro {
  padding: 3px;
  background: conic-gradient(from var(--angle), #f59e0b, #ef4444, #ec4899, var(--accent), #3b82f6, #f59e0b);
  animation: avatar-frame-spin 2.5s linear infinite;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.3);
}
.avatar-frame-animated > .post-avatar,
.avatar-frame-animated > .comment-avatar,
.avatar-frame-animated > .lfg-avatar,
.avatar-frame-animated > .profile-avatar-lg,
.avatar-frame-animated > .conv-avatar,
.avatar-frame-animated > .story-avatar,
.avatar-frame-animated > .search-player-avatar {
  border: 3px solid var(--bg-primary);
  overflow: hidden;
}

/* --- Spinning gradient rings --- */
.frame-rainbow { background: conic-gradient(from var(--angle), var(--accent), #3b82f6, #06b6d4, #22c55e, #f59e0b, #ef4444, #ec4899, var(--accent)); }
.frame-fire { background: conic-gradient(from var(--angle), #ff4500, #ff8c00, #ffd700, #ff4500); --frame-glow: rgba(255,69,0,.4); }
.frame-ice { background: conic-gradient(from var(--angle), #00c6ff, #0072ff, #00f2fe, #4facfe, #00c6ff); --frame-glow: rgba(0,198,255,.4); }
.frame-toxic { background: conic-gradient(from var(--angle), #39ff14, #00ff41, #b3ff00, #7fff00, #39ff14); --frame-glow: rgba(57,255,20,.4); }
.frame-royal { background: conic-gradient(from var(--angle), #ffd700, #daa520, #ffdf00, #f5c211, #ffd700); --frame-glow: rgba(255,215,0,.4); }
.frame-shadow { background: conic-gradient(from var(--angle), #1a1a2e, #16213e, #0f3460, #533483, #1a1a2e); --frame-glow: rgba(83,52,131,.4); }
.frame-sunset { background: conic-gradient(from var(--angle), #ff512f, #f09819, #ff5e62, #ff9966, #ff512f); --frame-glow: rgba(255,81,47,.4); }
.frame-ocean { background: conic-gradient(from var(--angle), #2193b0, #6dd5ed, #00b4db, #0083b0, #2193b0); --frame-glow: rgba(33,147,176,.4); }
.frame-plasma { background: conic-gradient(from var(--angle), #e100ff, #7f00ff, #e100ff, #7f00ff); --frame-glow: rgba(225,0,255,.5); }
.frame-aurora { background: conic-gradient(from var(--angle), #00c9ff, #92fe9d, #00c9ff, #92fe9d); --frame-glow: rgba(0,201,255,.4); }
.frame-cherry { background: conic-gradient(from var(--angle), #eb3349, #f45c43, #ff6b6b, #eb3349); --frame-glow: rgba(235,51,73,.4); }
.frame-mint { background: conic-gradient(from var(--angle), #0cebeb, #20e3b2, #29ffc6, #0cebeb); --frame-glow: rgba(12,235,235,.4); }
.frame-lavender { background: conic-gradient(from var(--angle), #c471f5, #fa71cd, #c471f5, #fa71cd); --frame-glow: rgba(196,113,245,.4); }
.frame-crimson { background: conic-gradient(from var(--angle), #dc143c, #8b0000, #ff1744, #dc143c); --frame-glow: rgba(220,20,60,.5); }
.frame-emerald { background: conic-gradient(from var(--angle), #00c853, #1de9b6, #00e676, #00c853); --frame-glow: rgba(0,200,83,.4); }
.frame-sapphire { background: conic-gradient(from var(--angle), #0d47a1, #1565c0, #42a5f5, #0d47a1); --frame-glow: rgba(13,71,161,.5); }
.frame-rose-gold { background: conic-gradient(from var(--angle), #b76e79, #e8c4a2, #d4a574, #b76e79); --frame-glow: rgba(183,110,121,.4); }
.frame-neon-pink { background: conic-gradient(from var(--angle), #ff00ff, #ff69b4, #ff1493, #ff00ff); --frame-glow: rgba(255,0,255,.5); }
.frame-neon-blue { background: conic-gradient(from var(--angle), #00f0ff, #0080ff, #00bfff, #00f0ff); --frame-glow: rgba(0,240,255,.5); }
.frame-neon-green { background: conic-gradient(from var(--angle), #00ff00, #39ff14, #76ff03, #00ff00); --frame-glow: rgba(0,255,0,.5); }
.frame-neon-orange { background: conic-gradient(from var(--angle), #ff6600, #ff9900, #ffcc00, #ff6600); --frame-glow: rgba(255,102,0,.5); }
.frame-galaxy { background: conic-gradient(from var(--angle), #0c0032, #190061, #240090, #3500d3, #282828, #0c0032); --frame-glow: rgba(53,0,211,.4); }
.frame-lava { background: conic-gradient(from var(--angle), #ff0000, #ff4400, #ff8800, #cc0000, #ff0000); --frame-glow: rgba(255,0,0,.5); }
.frame-frost { background: conic-gradient(from var(--angle), #e0f7fa, #80deea, #4dd0e1, #b2ebf2, #e0f7fa); --frame-glow: rgba(77,208,225,.4); }
.frame-amethyst { background: conic-gradient(from var(--angle), #9b59b6, #8e44ad, #6c3483, #a569bd, #9b59b6); --frame-glow: rgba(155,89,182,.5); }
.frame-copper { background: conic-gradient(from var(--angle), #b87333, #da8a67, #c08040, #e5a050, #b87333); --frame-glow: rgba(184,115,51,.4); }
.frame-silver { background: conic-gradient(from var(--angle), #c0c0c0, #e8e8e8, #a0a0a0, #d0d0d0, #c0c0c0); --frame-glow: rgba(192,192,192,.4); }
.frame-bronze { background: conic-gradient(from var(--angle), #cd7f32, #b8860b, #daa520, #cd7f32); --frame-glow: rgba(205,127,50,.4); }
.frame-diamond { background: conic-gradient(from var(--angle), #b9f2ff, #e0f7fa, #89cff0, #b9f2ff, #e0f7fa); --frame-glow: rgba(185,242,255,.5); }
.frame-obsidian { background: conic-gradient(from var(--angle), #0a0a0a, #2d2d2d, #1a1a1a, #333, #0a0a0a); --frame-glow: rgba(45,45,45,.5); }
.frame-candy { background: conic-gradient(from var(--angle), #ff6ec7, #ff9a9e, #fad0c4, #ffecd2, #ff6ec7); --frame-glow: rgba(255,110,199,.4); }
.frame-earth { background: conic-gradient(from var(--angle), #8B4513, #228B22, #DAA520, #556B2F, #8B4513); --frame-glow: rgba(139,69,19,.4); }
.frame-storm { background: conic-gradient(from var(--angle), #1a1a2e, #4a4e69, #22223b, #9a8c98, #1a1a2e); --frame-glow: rgba(74,78,105,.5); }
.frame-peach { background: conic-gradient(from var(--angle), #ffdab9, #ff8c69, #ffa07a, #ffdab9); --frame-glow: rgba(255,140,105,.4); }
.frame-matrix { background: conic-gradient(from var(--angle), #003300, #00ff00, #006600, #00cc00, #003300); --frame-glow: rgba(0,255,0,.4); }
.frame-vampire { background: conic-gradient(from var(--angle), #8b0000, #2d0000, #660000, #4d0000, #8b0000); --frame-glow: rgba(139,0,0,.5); }
.frame-unicorn { background: conic-gradient(from var(--angle), #ff9ff3, #feca57, #ff6b6b, #48dbfb, #ff9ff3); --frame-glow: rgba(255,159,243,.4); }
.frame-vaporwave { background: conic-gradient(from var(--angle), #ff71ce, #01cdfe, #05ffa1, #b967ff, #fffb96, #ff71ce); --frame-glow: rgba(255,113,206,.4); }
.frame-retro { background: conic-gradient(from var(--angle), #ff6b35, #f7c59f, #efefd0, #004e89, #1a659e, #ff6b35); --frame-glow: rgba(255,107,53,.4); }
.frame-cyberpunk { background: conic-gradient(from var(--angle), #ff003c, #00f0ff, #ff003c, #00f0ff); --frame-glow: rgba(255,0,60,.5); }
.frame-holo { background: conic-gradient(from var(--angle), #ff00ff, #00ffff, #ff00ff, #ffff00, #00ffff); --frame-glow: rgba(255,0,255,.3); animation-duration: 2s; }
.frame-sakura { background: conic-gradient(from var(--angle), #ffb7c5, #ff69b4, #ffc0cb, #ffb7c5); --frame-glow: rgba(255,183,197,.4); }
.frame-midnight { background: conic-gradient(from var(--angle), #191970, #000080, #0f0f3d, #1a1a5e, #191970); --frame-glow: rgba(25,25,112,.5); }
.frame-coral { background: conic-gradient(from var(--angle), #ff7f50, #ff6347, #ff4500, #ff7f50); --frame-glow: rgba(255,127,80,.4); }
.frame-arctic { background: conic-gradient(from var(--angle), #a8e6cf, #dcedc1, #ffd3b6, #ffaaa5, #a8e6cf); --frame-glow: rgba(168,230,207,.4); }
.frame-inferno { background: conic-gradient(from var(--angle), #ff0000, #ff6600, #ffcc00, #ff0000); --frame-glow: rgba(255,0,0,.5); animation-duration: 2s; }
.frame-steel { background: conic-gradient(from var(--angle), #708090, #778899, #b0c4de, #4682b4, #708090); --frame-glow: rgba(112,128,144,.4); }
.frame-bubblegum { background: conic-gradient(from var(--angle), #ff77a9, #ff99cc, #ffb3d9, #ff77a9); --frame-glow: rgba(255,119,169,.4); }
.frame-forest { background: conic-gradient(from var(--angle), #013220, #228B22, #006400, #2e8b57, #013220); --frame-glow: rgba(34,139,34,.4); }
.frame-electric { background: conic-gradient(from var(--angle), #ffff00, #00f0ff, #ff00ff, #ffff00); --frame-glow: rgba(255,255,0,.3); animation-duration: 1.5s; }
.frame-blood-moon { background: conic-gradient(from var(--angle), #8b0000, #2d0000, #ff4500, #8b0000); --frame-glow: rgba(255,69,0,.4); }
.frame-cotton-candy { background: conic-gradient(from var(--angle), #ffc8dd, #bde0fe, #cdb4db, #ffc8dd); --frame-glow: rgba(255,200,221,.4); }
.frame-void { background: conic-gradient(from var(--angle), #0d0221, #150734, #1b1040, #0d0221); --frame-glow: rgba(27,16,64,.5); }
.frame-prism { background: conic-gradient(from var(--angle), #ff0000, #ff7700, #ffff00, #00ff00, #0000ff, #8b00ff, #ff0000); --frame-glow: rgba(255,0,0,.3); animation-duration: 4s; }

/* --- Pulse animation variants --- */
.frame-pulse { animation: avatar-frame-spin 3s linear infinite, avatar-frame-pulse 2s ease-in-out infinite; }
.frame-breathe { animation: avatar-frame-spin 3s linear infinite, avatar-frame-breathe 3s ease-in-out infinite; }

/* --- Static (non-spinning) solid rings --- */
.frame-solid-purple { background: var(--accent); animation: avatar-frame-pulse 2s ease-in-out infinite; --frame-glow: rgba(122,126,140,.5); }
.frame-solid-red { background: #ef4444; animation: avatar-frame-pulse 2s ease-in-out infinite; --frame-glow: rgba(239,68,68,.5); }
.frame-solid-blue { background: #3b82f6; animation: avatar-frame-pulse 2s ease-in-out infinite; --frame-glow: rgba(59,130,246,.5); }
.frame-solid-green { background: #22c55e; animation: avatar-frame-pulse 2s ease-in-out infinite; --frame-glow: rgba(34,197,94,.5); }
.frame-solid-gold { background: #f59e0b; animation: avatar-frame-pulse 2s ease-in-out infinite; --frame-glow: rgba(245,158,11,.5); }
.frame-solid-pink { background: #ec4899; animation: avatar-frame-pulse 2s ease-in-out infinite; --frame-glow: rgba(236,72,153,.5); }
.frame-solid-cyan { background: #06b6d4; animation: avatar-frame-pulse 2s ease-in-out infinite; --frame-glow: rgba(6,182,212,.5); }
.frame-solid-white { background: #f8fafc; animation: avatar-frame-pulse 2s ease-in-out infinite; --frame-glow: rgba(248,250,252,.4); }

/* --- Ring picker UI --- */
.ring-picker-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-2); max-height: 240px; overflow-y: auto; padding: 8px 0; }
.ring-picker-item { width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .15s, box-shadow .15s; border: 2px solid transparent; position: relative; }
.ring-picker-item:hover { transform: scale(1.15); }
.ring-picker-item.selected { border-color: var(--accent); box-shadow: 0 0 12px var(--accent); }
.ring-picker-item .ring-preview-inner { width: 30px; height: 30px; border-radius: 50%; background: var(--bg-primary); }
.ring-picker-item.ring-none { background: var(--bg-input); border: 2px dashed rgba(255,255,255,.15); }
.ring-picker-item.ring-none::after { content: 'OFF'; font-size: 9px; font-weight: 700; color: var(--text-muted); }
.ep-avatar-no-frame { display: inline-block; border-radius: 50%; }

/* --- Subscription Tour --- */
.sub-tour-overlay { position: fixed; inset: 0; z-index: var(--z-top); background: rgba(0,0,0,.7); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s; }
.sub-tour-overlay.visible { opacity: 1; }
.sub-tour-modal { background: var(--bg-card); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-lg); width: 90%; max-width: 420px; overflow: hidden; transform: scale(.9); transition: transform .3s; }
.sub-tour-overlay.visible .sub-tour-modal { transform: scale(1); }
.sub-tour-header { text-align: center; padding: 32px 24px 20px; background: linear-gradient(135deg, var(--accent-muted), rgba(236,72,153,.1)); position: relative; overflow: hidden; }
.sub-tour-confetti { position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(255,215,0,.15) 0%, transparent 50%), radial-gradient(circle at 80% 20%, var(--accent-muted) 0%, transparent 50%), radial-gradient(circle at 50% 80%, rgba(236,72,153,.1) 0%, transparent 50%); }
.sub-tour-welcome { font-size: 24px; font-weight: 800; color: var(--text-primary); position: relative; }
.sub-tour-subtitle { font-size: 14px; color: var(--text-muted); margin-top: 4px; position: relative; }
.sub-tour-body { padding: 28px 24px; }
.sub-tour-feature { text-align: center; transition: opacity .15s; min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sub-tour-feature-icon { font-size: 40px; margin-bottom: 12px; }
.sub-tour-feature-title { font-size: 18px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.sub-tour-feature-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.5; max-width: 320px; }
.sub-tour-dots { display: flex; justify-content: center; gap: var(--sp-2); margin-top: 20px; }
.sub-tour-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.15); cursor: pointer; transition: all .2s; }
.sub-tour-dot.active { background: var(--accent); width: 24px; border-radius: var(--radius-xs); }
.sub-tour-footer { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-top: 1px solid rgba(255,255,255,.06); }
.sub-tour-skip { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 13px; padding: 8px 12px; }
.sub-tour-skip:hover { color: var(--text-primary); }
.sub-tour-next { padding: 10px 28px; font-size: 14px; font-weight: 600; border-radius: var(--radius-sm); }

/* Beta badge next to logo */
.beta-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent, var(--accent));
  border: 1.5px solid var(--accent, var(--accent));
  border-radius: var(--radius-xs);
  padding: 2px 6px;
  line-height: 1;
  white-space: nowrap;
  opacity: .85;
  margin-top: 2px;
}
/* Sidebar: tiny superscript-style tag beside the mark, intentional but quiet */
.sidebar-logo .beta-badge {
  align-self: flex-start;
  margin-top: 7px;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .8px;
  padding: 1px 3px;
  border-width: 1px;
  border-radius: 4px;
  opacity: .55;
}

/* ── Welcome Page ── */
.welcome-overlay {
  position: fixed; inset: 0; z-index: var(--z-top);
  background: var(--bg-primary);
  opacity: 0; transition: opacity .3s ease;
}
.welcome-overlay.visible { opacity: 1; }
.welcome-page {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.welcome-scroll {
  width: 100%; max-width: 440px; padding: 40px 28px;
  max-height: 100vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.welcome-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 28px;
}
.welcome-logo {
  font-size: 20px; font-weight: 900; color: white;
  letter-spacing: 0.08em;
}
.welcome-badge {
  font-size: 9px; font-weight: 800; letter-spacing: 0.1em;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent-mid); border-radius: var(--radius-xs);
  padding: 2px 7px;
}
.welcome-title {
  font-size: 28px; font-weight: 800; color: white;
  margin: 0 0 8px; letter-spacing: -0.03em; line-height: 1.1;
}
.welcome-sub {
  font-size: 15px; color: rgba(255,255,255,.45); margin: 0 0 24px;
  line-height: 1.5;
}

/* Beta card */
.welcome-beta-card {
  display: flex; gap: var(--sp-3); padding: 14px 16px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-sm); margin-bottom: 24px;
}
.welcome-beta-icon {
  color: rgba(255,255,255,.3); flex-shrink: 0; margin-top: 1px;
}
.welcome-beta-title {
  font-size: 13px; font-weight: 700; color: rgba(255,255,255,.7);
  margin-bottom: 4px;
}
.welcome-beta-text {
  font-size: 13px; color: rgba(255,255,255,.35); line-height: 1.5;
  margin: 0;
}

/* Features */
.welcome-features { margin-bottom: 20px; }
.welcome-features-label {
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,.3);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px;
}
.welcome-feature {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: rgba(255,255,255,.6); font-weight: 500;
  padding: 6px 0;
}
.welcome-feature svg { flex-shrink: 0; }

/* Maintenance note */
.welcome-maintenance {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 12px; color: rgba(255,255,255,.25);
  padding: 10px 14px; background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.04); border-radius: var(--radius-sm);
  margin-bottom: 20px;
}
.welcome-maintenance svg { flex-shrink: 0; opacity: .5; }

/* Closing */
.welcome-closing {
  font-size: 12px; color: rgba(255,255,255,.2); line-height: 1.5;
  margin: 0 0 24px;
}

/* Actions */
.welcome-actions { display: flex; flex-direction: column; gap: var(--sp-2); }
.welcome-primary {
  width: 100%; padding: 14px; border: none; border-radius: var(--radius-sm);
  background: var(--accent); color: white;
  font-size: 15px; font-weight: 700; cursor: pointer;
  transition: all .12s; letter-spacing: -0.01em;
}
.welcome-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.welcome-primary:active { transform: scale(.98); }
.welcome-skip {
  width: 100%; padding: 10px; border: none; border-radius: var(--radius-sm);
  background: transparent; color: rgba(255,255,255,.3);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: color .1s;
}
.welcome-skip:hover { color: rgba(255,255,255,.5); }

/* Plan badge styles (override) */
.plan-badge-pro-glow {
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.15);
}

/* Accent color lock overlay for free users */
.accent-swatch-locked {
  position: relative;
  filter: grayscale(0.7);
  opacity: 0.5;
  cursor: not-allowed !important;
}
.accent-swatch-locked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
}

/* Priority LFG star icon */
.lfg-priority-star {
  color: #f59e0b;
  font-size: 14px;
  margin-left: 4px;
  animation: star-glow 2s ease-in-out infinite;
}
@keyframes star-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ================================================================
   PROFILE ANALYTICS DASHBOARD (Pro)
   ================================================================ */
.analytics-dashboard { padding: 16px; display: flex; flex-direction: column; gap: var(--sp-4); }

/* Overview Cards Grid */
.analytics-grid { display: grid; gap: var(--sp-3); padding: 0; }
.analytics-grid-6 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.analytics-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.analytics-card:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.analytics-card-accent { border-top: 3px solid var(--accent-primary); }
.analytics-card-icon { font-size: 20px; margin-bottom: 4px; }
.analytics-card-value {
  font-size: 24px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
}
.analytics-card-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.analytics-card svg { margin-top: 8px; }

/* Key Metrics Row */
.analytics-metrics-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--sp-3);
}
.analytics-metric {
  background: linear-gradient(135deg, var(--accent-soft), rgba(59,130,246,0.08));
  border: 1px solid var(--accent-mid);
  border-radius: var(--radius);
  padding: 14px;
  text-align: center;
}
.analytics-metric-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
}
.analytics-metric-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Trends Row */
.analytics-trends-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 700px) { .analytics-trends-row { grid-template-columns: 1fr; } }
.analytics-trend-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.analytics-trend-header {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}
.analytics-trend-stats {
  display: flex;
  gap: var(--sp-4);
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.analytics-trend-stats strong { color: var(--accent-primary); }

/* Section Cards */
.analytics-section-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.analytics-section-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
}
.analytics-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: -8px 0 10px;
}

/* Chart Tab Switcher */
.analytics-chart-tabs {
  display: flex;
  gap: var(--sp-1);
  margin-bottom: 12px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  padding: 3px;
  width: fit-content;
}
.analytics-chart-tab {
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 6px 14px;
  border-radius: var(--radius-xs);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.analytics-chart-tab.active {
  background: var(--accent-primary);
  color: #fff;
}
.analytics-chart-tab:hover:not(.active) { color: var(--text-primary); }

/* Two Column Layout */
.analytics-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 700px) { .analytics-two-col { grid-template-columns: 1fr; } }

/* Reaction Breakdown Bars */
.analytics-reaction-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 0;
}
.analytics-reaction-emoji { font-size: 18px; width: 24px; text-align: center; }
.analytics-reaction-name { font-size: 11px; font-weight: 700; width: 36px; color: var(--text-muted); }
.analytics-reaction-bar-track {
  flex: 1;
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-xs);
  overflow: hidden;
}
.analytics-reaction-bar-fill {
  height: 100%;
  border-radius: var(--radius-xs);
  transition: width 0.6s ease;
}
.analytics-reaction-pct { font-size: 12px; color: var(--text-muted); min-width: 70px; text-align: right; }

/* Hourly Heatmap */
.analytics-heatmap {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-1);
}
.analytics-heatmap-cell {
  aspect-ratio: 1;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: default;
  transition: transform 0.15s;
}
.analytics-heatmap-cell:hover { transform: scale(1.15); z-index: 1; }
.analytics-heatmap-cell span {
  font-size: 9px;
  color: var(--text-muted);
  font-weight: 600;
}

/* Game Breakdown Table */
.analytics-game-table { display: flex; flex-direction: column; gap: var(--sp-1); }
.analytics-game-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.analytics-game-row:hover { background: var(--accent-soft); }
.analytics-game-name { flex: 1; font-weight: 600; font-size: 13px; }
.analytics-game-stat {
  font-size: 12px;
  color: var(--text-muted);
  min-width: 70px;
  text-align: right;
}

/* Top Posts List */
.analytics-top-posts-list { display: flex; flex-direction: column; gap: 6px; }
.analytics-top-post-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 12px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.analytics-top-post-row:hover { background: var(--accent-soft); transform: translateX(4px); }
.analytics-top-post-rank {
  font-size: 18px;
  font-weight: 800;
  color: var(--accent-primary);
  min-width: 36px;
  text-align: center;
}
.analytics-top-post-content { flex: 1; min-width: 0; }
.analytics-top-post-body {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 4px;
}
.analytics-top-post-meta {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.analytics-top-post-game {
  background: var(--accent-primary);
  color: #fff;
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  font-size: 10px;
  font-weight: 600;
}
.analytics-top-post-eng {
  text-align: center;
  min-width: 50px;
}
.analytics-top-post-eng {
  font-size: 18px;
  font-weight: 800;
  color: var(--accent-primary);
  line-height: 1;
}
.analytics-top-post-eng small {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ================================================================
   MOBILE BOTTOM NAVIGATION
   ================================================================ */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-overlay);
  background: color-mix(in srgb, var(--bg-secondary) 90%, transparent);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-top: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 -8px 28px -16px rgba(0,0,0,0.7);
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* 2 items | spacer for FAB | 2 items */
  grid-template-columns: 1fr 1fr 64px 1fr 1fr;
  align-items: stretch;
}
/* Nav items */
.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 11px 0 9px;
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.18s ease, transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  min-width: 0;
}
.mobile-nav-item:active { transform: scale(0.92); }
.mobile-nav-badge {
  position: absolute; top: 6px; left: calc(50% + 8px);
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: #ff5247; color: #fff; font-size: 10px; font-weight: 800; line-height: 16px;
  text-align: center; border: 2px solid var(--bg-secondary); pointer-events: none;
}
.mobile-nav-item svg {
  width: 23px;
  height: 23px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.15s ease, stroke-width 0.15s ease;
  flex-shrink: 0;
}
.mobile-nav-item span {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.mobile-nav-item.active { color: var(--text-primary); }
.mobile-nav-item.active svg { stroke: var(--text-primary); stroke-width: 2.3; }
.mobile-nav-item.active span { color: var(--text-primary); font-weight: 700; }
.mobile-nav-item.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background: var(--text-primary);
  border-radius: 0 0 4px 4px;
}
/* Spacer for FAB gap */
.mobile-nav-spacer { pointer-events: none; }
/* FAB — absolutely centered on the nav bar */
/* Scroll-to-top — appears after scrolling down, smooth-returns to the top. */
.scroll-top-btn {
  position: fixed;
  right: 22px;
  bottom: 26px;
  z-index: 40;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  color: var(--text-primary);
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), background 0.15s;
}
.scroll-top-btn.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.scroll-top-btn:hover { background: var(--bg-elevated); }
.scroll-top-btn:active { transform: translateY(0) scale(0.9); }
.scroll-top-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* On mobile lift it above the fixed bottom nav so it never overlaps. */
@media (max-width: 768px) {
  .scroll-top-btn { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); right: 16px; width: 42px; height: 42px; }
}

.mobile-fab {
  position: absolute;
  left: 50%;
  top: -16px;
  transform: translateX(-50%);
  z-index: 1001;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  border: 3px solid var(--bg-secondary);
  background: linear-gradient(160deg, var(--bg-elevated), var(--bg-card));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 14px -4px rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}
.mobile-fab:active {
  transform: translateX(-50%) scale(0.9) rotate(90deg);
}
.mobile-fab:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 6px 18px -4px rgba(0,0,0,0.65);
}
.mobile-fab svg {
  stroke: white;
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 22px;
  height: 22px;
}

/* ================================================================
   MOBILE MORE MENU
   ================================================================ */
.mobile-more-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: mmFade 0.2s ease;
}
@keyframes mmFade { from { opacity: 0; } to { opacity: 1; } }
.mobile-more-overlay.hidden {
  display: none !important;
}
/* Lock the page behind the sheet so only the menu content scrolls. */
body.mobile-more-open { overflow: hidden; }
.mobile-more-sheet {
  box-sizing: border-box;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 480px;
  /* dvh tracks the visible viewport, so the sheet never hides behind the
     iOS Safari / Chrome bottom browser bar the way 100vh would. */
  max-height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-top: env(safe-area-inset-top);
  /* Clear the browser bar + home indicator so Sign Out is always reachable. */
  padding-bottom: calc(env(safe-area-inset-bottom) + 90px);
  box-shadow: 0 -16px 50px -12px rgba(0,0,0,0.6);
  animation: mmUp 0.26s var(--ease);
}
@keyframes mmUp { from { transform: translateY(18px); } to { transform: none; } }
.mobile-more-handle {
  width: 40px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 10px auto 2px;
}
.mobile-more-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.mobile-more-account {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
  padding: 8px;
  margin: -8px;
  border-radius: var(--radius-md);
  transition: background 0.12s;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.mobile-more-account:active { background: var(--bg-card-hover); }
.mobile-more-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  font-size: 17px;
  background-size: cover;
  background-position: center;
}
.mobile-more-account-info { min-width: 0; flex: 1; }
.mobile-more-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}
.mobile-more-sub {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile-more-chevron { color: var(--text-muted); flex-shrink: 0; }
.mobile-more-close {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.mobile-more-close:active { background: var(--bg-card-hover); }
.mobile-more-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 4px 12px 10px;
}
.mobile-more-item {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 86px;
  padding: 10px 6px;
  border-radius: 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.1s;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.mobile-more-item:active {
  transform: scale(0.95);
  background: var(--bg-card-hover);
  color: var(--text-primary);
  border-color: var(--border-accent);
}
.mobile-more-item svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mobile-more-item span {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
}
.mobile-more-plans {
  color: var(--accent-gold);
  border-color: rgba(184,154,50,0.28);
  background: rgba(184,154,50,0.06);
}
.mobile-more-plans:active {
  background: rgba(184,154,50,0.12);
  color: var(--accent-gold);
}
/* Admin only shows for owners; spanning the full width keeps it from sitting
   alone as an awkward single square on the last row. */
.mobile-more-admin {
  grid-column: 1 / -1;
  flex-direction: row;
  gap: 10px;
  height: auto;
  padding: 14px;
}
.mobile-more-logout {
  padding: 10px 16px 16px;
  margin-top: 4px;
}

/* ================================================================
   MOBILE HOME — COMPACT COMPOSER
   (hidden on desktop; enabled in the mobile media query below)
   ================================================================ */
.m-composer { display: none; }

/* Mobile header brand (logo + title) — logo shown on mobile only */
.m-header-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.m-header-logo { display: none; width: 30px; height: 30px; object-fit: contain; cursor: pointer; flex-shrink: 0; }

/* Compact mobile composer */
.m-composer {
  flex-direction: column; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.m-composer-bar {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-full);
  background: var(--bg-card);
  border: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s, background 0.2s;
}
.m-composer-bar:active { background: var(--bg-card-hover); }
.m-composer-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0;
  background: var(--accent); background-size: cover; background-position: center;
}
.m-composer-prompt { font-size: 14px; color: var(--text-secondary); font-weight: 500; }
.m-composer-actions { display: flex; gap: 8px; }
.m-quick {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 4px;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  transition: transform 0.14s var(--ease), border-color 0.2s, color 0.2s, background 0.2s;
}
.m-quick svg { width: 16px; height: 16px; }
.m-quick:active { transform: scale(0.95); }
.m-quick:hover { color: var(--text-primary); border-color: var(--border-accent); background: var(--bg-card-hover); }

/* ================================================================
   MOBILE RESPONSIVE OVERHAUL
   ================================================================ */
@media (max-width: 560px) {
  /* Show mobile nav */
  .mobile-nav {
    display: grid;
    overflow: visible;
  }
  .mobile-fab {
    display: flex;
  }
  .mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mobile-header-bell {
    display: flex;
  }
  .home-search-bar {
    display: none;
  }
  #app {
    max-width: 100vw;
    overflow-x: hidden;
  }
  #main-content {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    border-left: none;
    border-right: none;
    max-width: 100vw;
    overflow-x: hidden;
    width: 100%;
    background: var(--bg-primary);
  }

  /* Mobile-only home modules */
  .m-composer { display: flex; }
  #home-section .compose-box { display: none; }

  /* Section header — cleaner, balanced */
  .section-header {
    padding: 12px 14px 10px;
    position: sticky;
    top: 0;
    z-index: 10;
    gap: 10px;
  }
  .section-header-top { margin-bottom: 2px; }
  .section-header h2 {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.02em;
  }
  #home-section .m-header-logo { display: block; }
  .mobile-header-bell, .mobile-menu-btn {
    width: 36px; height: 36px;
    background: var(--bg-card);
    border-color: rgba(255,255,255,0.07);
  }
  .mobile-header-actions { gap: 6px; }

  /* Email verification banner — small + quiet */
  .verify-banner {
    padding: 8px 12px;
    gap: 8px;
  }
  .verify-banner svg { width: 15px; height: 15px; }
  .verify-banner-text { font-size: 12px; font-weight: 600; }
  .verify-banner-btn {
    padding: 5px 10px; font-size: 12px; border-radius: var(--radius-sm);
  }
  .verify-banner-x { font-size: 13px; padding: 2px 4px; }

  /* Tabs - horizontal scroll */
  .header-tabs,
  .explore-tabs,
  .notif-filter-row,
  .lb-time-filter,
  .games-filter-row,
  .lfg-filter-row,
  .profile-tabs {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-left: 12px;
    padding-right: 12px;
  }
  .header-tabs::-webkit-scrollbar,
  .explore-tabs::-webkit-scrollbar,
  .notif-filter-row::-webkit-scrollbar,
  .lb-time-filter::-webkit-scrollbar,
  .games-filter-row::-webkit-scrollbar,
  .lfg-filter-row::-webkit-scrollbar,
  .profile-tabs::-webkit-scrollbar {
    display: none;
  }
  .tab-btn,
  .filter-btn {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 6px 12px;
    font-size: 12px;
  }
  .profile-tab {
    white-space: nowrap;
    flex-shrink: 0;
    flex: none;
    padding: 10px 14px;
    font-size: 12px;
  }

  /* Stories - compact */
  .stories-container {
    padding: 8px 10px;
  }
  .stories-scroll {
    gap: 10px;
  }
  .story-ring {
    width: 52px;
    height: 52px;
  }
  .story-item {
    width: 52px;
    gap: 3px;
  }
  .story-item span {
    max-width: 52px;
    font-size: 9px;
  }

  /* Inline composer — clean + smooth when typing */
  .compose-box {
    padding: 12px 14px;
    gap: 10px;
    align-items: flex-start;
  }
  .compose-avatar {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }
  .compose-right textarea {
    /* 16px so iOS does NOT zoom the page on focus */
    font-size: 16px;
    min-height: 56px;
    border-radius: 14px;
    padding: 11px 13px;
  }
  /* Single tidy row: tools on the left, Cancel/Post on the right */
  .compose-footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 10px;
    margin-top: 10px;
  }
  .compose-actions-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    flex-wrap: nowrap;
  }
  .compose-toolbar-pill {
    justify-content: flex-start;
    background: transparent;
    border: none;
    gap: 2px;
  }
  /* Icon-only media button on mobile to save room */
  .compose-toolbar-pill .toolbar-media-btn span { display: none; }
  .compose-toolbar-pill .toolbar-media-btn { padding: 7px; }

  /* "Tag a game" hidden until the Game quick action reveals it
     (keeps Cancel from merging into the field, and makes the
     Post / Clip / Game actions visibly distinct) */
  #home-section .compose-box #compose-game-tag-wrap { display: none; }
  #home-section .compose-box.gametag-on .compose-actions-row { flex-direction: column; align-items: stretch; }
  #home-section .compose-box.gametag-on .compose-actions-row > div:last-child { justify-content: flex-end; }
  #home-section .compose-box.gametag-on #compose-game-tag-wrap {
    display: block;
    flex: 1 1 100%;
    max-width: none;
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
  }
  #home-section .compose-box.gametag-on #compose-game-tag-wrap .game-search-input { font-size: 14px; padding: 9px 12px 9px 30px; }

  /* Posts — flat timeline (no boxes), hairline dividers */
  .feed-container { padding: 0; }
  .post-card {
    padding: 13px 14px;
    border-radius: 0;
    margin: 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    box-shadow: none;
  }
  .post-card:active { background: rgba(255,255,255,0.02); }
  .post-avatar {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
  .post-header > .post-avatar { width: 40px; height: 40px; }
  .post-header {
    gap: 10px;
    margin-bottom: 9px;
  }
  .post-user-row {
    gap: 4px;
  }
  .post-username {
    font-size: 14px;
  }
  .post-tag, .post-handle, .post-dot-time {
    font-size: 12.5px;
  }
  .post-sub-row { margin-top: 3px; gap: 6px; row-gap: 4px; }
  .post-meta-row { font-size: 11.5px; margin-top: 2px; }
  .post-time {
    font-size: 12px;
  }
  /* 3-dot always tappable on mobile */
  .post-menu-btn { opacity: 1; }
  /* On narrow screens the @handle yields first so name + time + menu always fit */
  .post-handle { flex-shrink: 3; }
  .post-body {
    font-size: 14.5px;
    line-height: 1.5;
    margin-bottom: 0;
  }
  /* Media framing — large, crisp, gaming-grade */
  .post-image-container,
  .post-image-grid {
    margin: 11px 0 0;
    border-radius: 14px;
    border-color: rgba(255,255,255,0.08);
  }
  .post-card .dxp-mount {
    margin-top: 11px;
    border-radius: 14px;
    overflow: hidden;
  }
  /* Action row — bigger, cleaner, easier to tap */
  .post-actions {
    margin-left: -6px;
    margin-top: 10px;
    gap: 2px;
  }
  .post-action-btn {
    padding: 8px 6px;
    font-size: 12px;
    gap: 6px;
    border-radius: var(--radius-full);
  }
  .post-action-btn svg {
    width: 18px;
    height: 18px;
  }
  .post-action-btn.liked { color: #f06280; }
  .post-delete-btn {
    opacity: 1;
  }

  /* Badges - smaller on mobile */
  .post-type-badge {
    font-size: 9px;
    padding: 1px 5px;
    opacity: 0.85;
  }
  .type-clip { background: var(--bg-elevated); color: var(--text-secondary); border-color: rgba(255,255,255,0.06); }
  .post-game-tag {
    font-size: 10px;
    padding: 2px 7px;
  }
  .post-community-label { font-size: 11px; }
  .post-platform-badge {
    display: none;
  }
  .plan-badge {
    font-size: 8px;
    padding: 1px 5px;
  }

  /* Explore */
  .search-bar-big {
    max-width: none;
    padding: 8px 12px;
  }
  .trending-section {
    padding: 0 12px;
  }
  .trending-game-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
    border-radius: var(--radius-sm);
  }
  .trending-rank {
    font-size: 16px;
    width: 24px;
  }
  .trending-name {
    font-size: 14px;
  }

  /* Games grid */
  .games-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2);
    padding: 10px;
  }
  .game-cover {
    height: 80px;
    font-size: 32px;
  }
  .game-title {
    font-size: 12px;
  }
  .game-info {
    padding: 8px 10px;
  }

  /* Messages layout - stack vertically */
  .messages-layout {
    flex-direction: column;
    height: calc(100vh - 64px - env(safe-area-inset-bottom, 0px));
  }
  .messages-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    flex: 1;
    overflow-y: auto;
  }
  .messages-sidebar-header {
    padding: 10px 14px;
  }
  .messages-search {
    padding: 8px 14px;
  }
  .messages-sidebar.msg-sidebar-hidden {
    display: none;
  }
  .messages-chat {
    flex: 1;
    min-height: 0;
  }
  .messages-chat.msg-chat-hidden {
    display: none;
  }
  .chat-header {
    padding: 8px 12px;
  }
  .chat-messages {
    padding: 10px 12px;
    min-height: 200px;
    max-height: calc(100vh - 240px);
  }
  .chat-input-row {
    padding: 8px 12px;
  }
  .chat-msg {
    max-width: 88%;
  }

  /* Messages back button (mobile) - !important to override base rule that appears later in file */
  .msg-back-btn {
    display: flex !important;
  }

  /* Notifications */
  .notif-item {
    padding: 14px 14px;
    gap: 12px;
  }
  .notif-icon {
    width: 34px;
    height: 34px;
    font-size: 15px;
    border-radius: var(--radius-sm);
  }
  .notif-text {
    font-size: 13.5px;
  }
  .notif-preview { font-size: 12px; }

  /* Leaderboard */
  .lb-row {
    padding: 10px;
    gap: var(--sp-2);
  }
  .lb-rank {
    font-size: 14px;
    width: 24px;
  }
  .lb-avatar {
    width: 32px;
    height: 32px;
    font-size: 11px;
  }
  .lb-stats {
    gap: 6px;
  }
  .lb-stat-val {
    font-size: 12px;
  }
  .lb-stat-lbl {
    font-size: 8px;
  }

  /* Profile - properly responsive */
  .profile-banner {
    height: 120px;
    font-size: 44px;
  }
  .profile-banner-icon {
    font-size: 40px;
    right: 12px;
  }
  .profile-header-info {
    padding: 0 12px 8px;
  }
  .profile-avatar {
    width: 60px;
    height: 60px;
    font-size: 20px;
    border-width: 3px;
  }
  .profile-avatar-lg {
    width: 60px;
    height: 60px;
    min-width: 60px;
    font-size: 20px;
  }
  .profile-avatar-row {
    margin-top: -42px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .profile-actions-row {
    width: 100%;
    gap: 6px;
  }
  .profile-actions-row .btn-primary,
  .profile-actions-row .btn-secondary {
    flex: 1;
    text-align: center;
    justify-content: center;
    font-size: 12px;
    padding: 8px 12px;
  }
  .profile-edit-btn {
    width: 100%;
    justify-content: center;
  }
  .profile-name {
    font-size: 18px;
    flex-wrap: wrap;
    gap: var(--sp-1);
  }
  .profile-handle {
    font-size: 12px;
  }
  .profile-bio {
    font-size: 12.5px;
  }
  .profile-stats-row {
    gap: 0;
    justify-content: space-around;
    width: 100%;
  }
  .profile-stat {
    padding: 8px 10px;
    flex: 1;
  }
  .stat-val {
    font-size: 16px;
  }
  .stat-label {
    font-size: 10px;
  }
  .profile-game-tags {
    gap: var(--sp-1);
  }
  .profile-game-tag {
    font-size: 11px;
    padding: 3px 8px;
  }
  .btn-primary, .btn-secondary {
    font-size: 12px;
    padding: 8px 14px;
  }
  .btn-primary.btn-sm, .btn-secondary.btn-sm {
    padding: 6px 10px;
    font-size: 11px;
  }

  /* Achievements grid */
  .achievements-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 6px;
    padding: 10px;
  }

  /* LFG */
  .lfg-container {
    padding: 10px 12px;
  }
  .lfg-card {
    padding: 12px;
  }
  .lfg-footer {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Tournaments */
  #tournaments-container {
    padding: 10px 12px;
  }
  .tournament-banner {
    height: 70px;
    font-size: 32px;
  }
  .tournament-info {
    padding: 10px 12px;
  }
  .tournament-name {
    font-size: 13px;
  }
  .tournament-footer {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Modals - bottom sheet style */
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .modal-box {
    max-width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    border-radius: var(--radius-md) 16px 0 0;
  }
  .compose-modal {
    max-width: 100%;
    max-height: none;
    overflow: visible;
    border-radius: var(--radius-md) 16px 0 0;
    display: flex;
    flex-direction: column;
    background: #13132a;
  }
  /* 1. Compact header */
  .compose-modal-header {
    padding: 6px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .compose-modal-title {
    font-size: 15px;
  }
  /* 1. Tighter body padding, less gap */
  .compose-modal-body {
    padding: 8px 14px 4px;
    gap: 6px;
  }
  .compose-avatar-col {
    display: none;
  }
  /* 2. Slimmer textarea */
  .compose-textarea {
    font-size: 15px;
    min-height: 40px;
    max-height: 100px;
    background: transparent;
    border-radius: 0;
    padding: 2px 0;
    border: none;
  }
  .compose-textarea::placeholder {
    color: rgba(255,255,255,0.4);
  }
  .compose-textarea:focus {
    border-color: var(--accent-strong);
  }
  /* 3. Tags row compact */
  .compose-tags-row {
    display: flex;
    gap: 6px;
    padding-top: 0;
    border-top: none;
    margin-top: 0;
  }
  .compose-tag-select {
    font-size: 12px;
    padding: 7px 10px;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.5);
  }
  /* Give the game tag its own full-width row so the controls don't cram together. */
  .compose-tag-search-slot {
    flex: 1 1 100%;
    width: auto;
    min-width: 0;
    max-width: none;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-sm);
  }
  /* 3. Game tag input — borderless (field chrome lives on the slot) */
  .compose-tag-search-slot .game-search-input {
    font-size: 13px;
    width: 100%;
    padding: 8px 10px 8px 30px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
  }
  .compose-tag-search-slot .game-search-input::placeholder {
    color: rgba(255,255,255,0.3);
  }
  /* 3. Game controller icon inside tag field */
  .compose-tag-search-slot .game-search-wrap {
    position: relative;
  }
  .compose-tag-search-slot .game-search-wrap::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.35)' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='11' x2='10' y2='11'/%3E%3Cline x1='8' y1='9' x2='8' y2='13'/%3E%3Cline x1='15' y1='12' x2='15.01' y2='12'/%3E%3Cline x1='18' y1='10' x2='18.01' y2='10'/%3E%3Cpath d='M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
  }
  /* 4. Compact footer */
  .compose-modal-footer {
    padding: 6px 14px calc(6px + env(safe-area-inset-bottom, 0px));
    gap: var(--sp-2);
    flex-shrink: 0;
    background: #13132a;
    border-top: 1px solid rgba(255,255,255,0.06);
    align-items: center;
  }
  /* 4. Icon row — flat, compact */
  .compose-toolbar-pill {
    gap: 2px;
    padding: 0;
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    justify-content: flex-start;
  }
  .toolbar-icon-btn {
    width: 32px;
    height: 32px;
  }
  .toolbar-icon-btn svg {
    width: 16px;
    height: 16px;
  }
  .compose-footer-right {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
  }
  .compose-char-count {
    font-size: 12px;
    color: rgba(255,255,255,0.35);
  }
  /* 5. Post button — compact, matches the charcoal theme */
  .compose-post-btn-new {
    padding: 7px 18px;
    border-radius: var(--radius-lg);
    font-size: 13px;
    font-weight: 600;
    background: var(--accent);
    box-shadow: none;
  }
  .compose-post-btn-new:hover {
    background: var(--accent-2);
    box-shadow: none;
  }
  /* 6. Brighter close/cancel button */
  .compose-modal-header .icon-btn {
    color: rgba(255,255,255,0.55);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-sm);
    padding: 6px;
  }
  .compose-modal-header .icon-btn:hover {
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.08);
  }

  /* Auth modal mobile - handled by 768px and 480px breakpoints above */

  /* Clans */
  .clans-grid { grid-template-columns:1fr; }
  .clan-card { margin:0; }

  /* Clips */
  .clip-card {
    padding: 12px;
  }

  /* Settings */
  .settings-container {
    padding: 0;
  }

  /* Plans grid */
  .plans-grid {
    padding: 0 10px 20px;
    gap: var(--sp-3);
  }

  /* Analytics */
  .analytics-heatmap {
    grid-template-columns: repeat(6, 1fr);
  }

  /* People section */
  .people-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
    padding: 10px;
  }
  .people-card {
    padding: 12px;
    gap: 10px;
  }
  .people-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    font-size: 16px;
  }

  /* Bookmarks */
  #bookmarks-content {
    padding: 0;
  }

  /* Post image */
  .post-image {
    max-height: 240px;
    border-radius: var(--radius-sm);
  }
  .post-image-container {
    border-radius: var(--radius-sm);
  }

  /* Clip/Achievement cards - compact */
  .post-clip-preview {
    padding: 10px 12px;
    gap: 10px;
  }
  .clip-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
  }
  .post-achievement {
    padding: 10px 12px;
    gap: 10px;
  }
  .achievement-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
  }

  /* Comment section - compact */
  .comment-section {
    padding: 10px 10px 0;
  }
  .comments-list {
    gap: var(--sp-3);
  }
  .comment-avatar {
    width: 28px;
    height: 28px;
    min-width: 28px;
    font-size: 10px;
  }
  .comment-text {
    font-size: 13px;
  }
  .comment-input-row {
    gap: var(--sp-2);
    padding: 10px 0;
  }
  .comment-input-wrap {
    padding: 7px 10px;
    border-radius: var(--radius-sm);
  }
  .comment-input {
    font-size: 12px;
  }
  .comment-submit-btn {
    width: 26px;
    height: 26px;
  }
  .comment-thread-replies {
    margin-left: 12px;
    padding-left: 8px;
  }

  /* Quoted post - compact */
  .quoted-post-card {
    padding: 6px 10px;
  }

  /* Edit profile modal */
  .edit-profile-modal {
    max-width: 100%;
  }

  /* Lightbox */
  .img-lightbox-inner {
    max-width: 98vw;
  }

  /* Search bar in section header */
  .section-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2);
  }
  .home-search-bar {
    padding: 7px 12px;
    font-size: 13px;
  }

  /* Reconnecting banner */
  #reconnecting-banner {
    top: 0;
    bottom: auto;
    font-size: 12px;
  }

  /* Widget - hide on mobile (already hidden via sidebar) */
  .widget {
    padding: 10px;
  }

  /* Share dropdown */
  .share-dropdown {
    min-width: 150px;
    font-size: 12px;
  }
  .share-option {
    padding: 8px 12px;
    font-size: 12px;
  }

  /* Insight bubble */
  .insight-bubble {
    margin: 6px 10px 4px;
    padding: 10px 12px;
  }
  .insight-chip {
    font-size: 10px;
    padding: 4px 8px;
  }

  /* Now playing badge */
  .now-playing-badge {
    font-size: 9px;
  }

  /* Reply feed */
  .reply-feed-item {
    padding: 14px 12px;
  }
  .reply-feed-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    font-size: 12px;
  }
  .reply-feed-bubble {
    padding: 10px 12px;
  }

  /* Prevent iOS input zoom - inputs must be 16px+ */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  textarea,
  select,
  .comment-input,
  .compose-textarea,
  .chat-input,
  .home-search-bar input {
    font-size: 16px !important;
  }

  /* Global overflow containment */
  .feed-container,
  .section-content,
  .profile-section,
  .explore-content,
  .settings-container,
  .messages-layout,
  .notifications-list,
  .games-grid,
  .lfg-container,
  #tournaments-container,
  .people-grid,
  .achievements-grid,
  #bookmarks-content {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Ensure all text can wrap */
  .post-body,
  .comment-text,
  .profile-bio,
  .chat-bubble-text,
  .notif-text {
    overflow-wrap: anywhere;
  }

  /* Upgrade prompt - fit mobile */
  .upgrade-prompt-inner {
    min-width: 0;
    max-width: calc(100vw - 32px);
  }
}

/* Tablet tweaks (860px - no sidebar text but bottom nav not needed) */
@media (max-width: 860px) and (min-width: 561px) {
  .messages-sidebar {
    width: 200px;
  }
  .profile-banner {
    height: 160px;
  }
  .post-card {
    padding: 14px 16px;
  }
  .compose-toolbar-pill {
    gap: var(--sp-1);
    background: transparent;
    border: none;
  }
}

/* Hide mobile back button on desktop */
.msg-back-btn {
  display: none;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: all 0.2s;
}
.msg-back-btn:hover {
  color: var(--text-primary);
  background: var(--bg-card);
}
.msg-back-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* ── Legal Pages ── */
.legal-layout { max-width: 720px; margin: 0 auto; }
.legal-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.legal-tab { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-sm); color: var(--text-muted); font-size: 13px; font-weight: 500; padding: 8px 14px; cursor: pointer; transition: all .15s; }
.legal-tab:hover { background: rgba(255,255,255,0.06); color: var(--text-secondary); }
.legal-tab.active { background: var(--accent-soft); border-color: var(--accent-mid); color: var(--accent-light); }
.legal-content { font-size: 14px; line-height: 1.7; color: var(--text-secondary); }
.legal-content h2 { font-size: 22px; font-weight: 700; color: var(--text-primary); margin: 0 0 6px; }
.legal-content h3 { font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 24px 0 8px; }
.legal-content p { margin: 8px 0; }
.legal-content ul, .legal-content ol { margin: 8px 0; padding-left: 24px; }
.legal-content li { margin: 4px 0; }
.legal-content strong { color: var(--text-primary); }
.legal-updated { font-size: var(--text-sm); color: var(--text-muted); font-style: italic; margin-bottom: var(--sp-4); }

/* ── Sidebar Legal Footer ── */
.sidebar-legal-footer { padding: 12px 4px 8px; text-align: center; font-size: 11px; color: var(--text-muted); opacity: .6; margin-top: auto; }
.sidebar-legal-footer a { color: var(--text-muted); cursor: pointer; text-decoration: none; transition: color .15s; }
.sidebar-legal-footer a:hover { color: var(--accent); text-decoration: underline; }
.legal-dot { margin: 0 4px; }
.legal-copy { margin-top: 6px; font-size: 10px; opacity: .7; }

/* ── Pinned Comments on Homepage ── */
.pinned-comments-section { margin-bottom: 16px; }
.pinned-comments-header { display: flex; align-items: center; gap: var(--sp-2); font-size: 14px; font-weight: 600; color: var(--accent); padding: 12px 16px 8px; }
.pinned-comments-header svg { color: var(--accent); }
.pinned-comment-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 8px; }
.pinned-comment-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pinned-comment-info { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.pinned-comment-body { font-size: 14px; color: var(--text-primary); line-height: 1.5; padding-left: 42px; }
.pinned-comment-context { font-size: 12px; color: var(--text-muted); padding-left: 42px; margin-top: 6px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pinned-comment-context:hover { color: var(--accent); }
.pinned-unpin-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: var(--radius-xs); transition: all .15s; display: flex; align-items: center; }
.pinned-unpin-btn:hover { color: #ef4444; background: rgba(239,68,68,.1); }
.comment-pin-btn { color: var(--text-muted); font-size: 12px; display: inline-flex; align-items: center; gap: 3px; }
.comment-pin-btn:hover { color: var(--accent); }

/* ── DxedPlayer Error State ── */
.dxp-error { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:rgba(0,0,0,.7); color:var(--text-muted); font-size:13px; z-index:10; }
.dxp-error svg { opacity:.5; }
.clip-thumb-error { background:var(--bg-secondary); display:flex; align-items:center; justify-content:center; }
.clip-thumb-error::after { content:'Video unavailable'; color:var(--text-muted); font-size:12px; }


/* --- Navigation --- */

/* --- Buttons --- */

/* --- Posts / Cards / Feed --- */

/* --- Stories --- */

/* --- Reactions --- */

/* --- Search / Filters --- */

/* --- Games --- */

/* --- Messages --- */

/* --- Notifications --- */

/* --- Leaderboard --- */

/* --- Profile --- */

/* --- Hashtags --- */

/* --- Modals --- */

/* --- Toasts --- */

/* --- Inputs --- */

/* --- Comments --- */

/* --- AI Chips --- */

/* --- Compose --- */

/* --- Reply Feed --- */

/* --- Plans (purple as secondary brand) --- */

/* --- Clans --- */

/* --- Clips --- */

/* --- People --- */

/* --- Auth --- */

/* --- Admin --- */

/* --- Legal --- */

/* --- Analytics --- */

/* --- Sub Tour --- */

/* --- Stories Upload --- */

/* --- Scrollbar --- */
.vp-error { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:16px; background:rgba(0,0,0,.8); z-index:5; }

/* ================================================================
   LIGHT THEME — Clean, modern, layered design system
   NOT an inversion of dark mode — designed as its own system
   ================================================================ */

/* --- Layout --- */
[data-theme="light"] #main-content { border-left: 1px solid #E6E6EB; border-right: 1px solid #E6E6EB; }
[data-theme="light"] #sidebar { scrollbar-color: rgba(0,0,0,0.1) transparent; }
[data-theme="light"] #sidebar::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); }
[data-theme="light"] #sidebar::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.18); }
[data-theme="light"] #right-sidebar { scrollbar-color: rgba(0,0,0,0.08) transparent; }

/* --- Scrollbar --- */
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); }

/* --- Section Header --- */
[data-theme="light"] .section-header { background: rgba(247,247,250,0.92); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-bottom: 1px solid #E6E6EB; }

/* --- Navigation / Sidebar --- */
[data-theme="light"] .nav-item { color: #6B6B76; }
[data-theme="light"] .nav-item-secondary { color: #9A9AA3; }
[data-theme="light"] .nav-group-label { color: #B0B0B8; }
[data-theme="light"] .nav-item:hover { background: rgba(0,0,0,0.04); color: #0A0A0F; }
[data-theme="light"] .nav-item.active { background: var(--accent-subtle); color: #0A0A0F; border-color: transparent; box-shadow: none; }
[data-theme="light"] .nav-item.active svg { filter: none; }
[data-theme="light"] .sidebar-divider { background: #E6E6EB; }
[data-theme="light"] .sidebar-user-card { border-color: #E6E6EB; background: #FFFFFF; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
[data-theme="light"] .sidebar-user-card:hover { background: #F5F5FA; border-color: #DADAE2; }
[data-theme="light"] .logo-img { filter: brightness(0) saturate(100%); }
[data-theme="light"] .auth-logo-img { filter: brightness(0) saturate(100%); }

/* --- Post Button --- */
[data-theme="light"] .btn-post { box-shadow: 0 2px 8px var(--accent-muted); }
[data-theme="light"] .btn-post:hover { box-shadow: 0 6px 20px var(--accent-mid); }
[data-theme="light"] .btn-post:active { box-shadow: 0 2px 6px var(--accent-muted); }

/* --- Tabs --- */
[data-theme="light"] .tab-btn { color: #9A9AA3; }
[data-theme="light"] .tab-btn:hover { background: rgba(0,0,0,0.04); color: #0A0A0F; }
[data-theme="light"] .tab-btn.active { color: #0A0A0F; background: var(--accent-soft); border-color: var(--accent-mid); }

/* --- Feed Tabs --- */
[data-theme="light"] .feed-tab { color: #6B6B76; border-color: #E6E6EB; background: transparent; }
[data-theme="light"] .feed-tab:hover { background: rgba(0,0,0,0.03); color: #0A0A0F; }
[data-theme="light"] .feed-tab.active { background: var(--accent) !important; color: #FFFFFF !important; border-color: var(--accent) !important; }

/* --- Posts / Cards --- */
[data-theme="light"] .post-card { background: #ffffff; border: 1px solid #E6E6EB; }
[data-theme="light"] .post-card:hover { background: #fafafb; border-color: #d8d8e0; }
[data-theme="light"] .post-username { color: #0A0A0F; }
[data-theme="light"] .post-username:hover { color: var(--accent); text-shadow: none; }
[data-theme="light"] .post-tag { color: #9A9AA3; }
[data-theme="light"] .post-time { color: #B0B0B8; }
[data-theme="light"] .post-game-tag { background: var(--accent-subtle); color: var(--accent); opacity: 0.8; }
[data-theme="light"] .post-game-tag:hover { background: var(--accent-soft); color: var(--accent); opacity: 1; }
[data-theme="light"] .post-avatar:hover { box-shadow: 0 0 0 2px var(--accent-muted), 0 4px 12px rgba(0,0,0,0.1); }
[data-theme="light"] .post-body { color: #1A1A2E; }
[data-theme="light"] .post-body a { color: var(--accent); }
[data-theme="light"] .post-action-btn { color: #9A9AA3; }
[data-theme="light"] .post-action-btn:hover { background: rgba(0,0,0,0.04); color: var(--accent); }
[data-theme="light"] .post-action-btn[data-action="reply"]:hover { color: var(--accent-blue); background: rgba(59,130,246,0.06); }
[data-theme="light"] .post-action-btn[data-action="boost"]:hover,
[data-theme="light"] .post-action-btn.reposted:hover,
[data-theme="light"] .post-action-btn.boosted:hover { color: var(--accent-green); background: rgba(34,197,94,0.06); }
[data-theme="light"] .post-delete-btn:hover { color: var(--accent-red); background: rgba(239,68,68,0.06); }
[data-theme="light"] .post-pin-btn:hover { background: rgba(0,0,0,0.04); }
[data-theme="light"] .post-pinned { border-color: var(--accent-soft); }
[data-theme="light"] .post-action-btn.bookmark-btn:hover { background: rgba(0,0,0,0.04); color: var(--accent); }

/* --- Post Media --- */
[data-theme="light"] .post-media-container { border: 1px solid #E6E6EB; border-radius: var(--radius); }

/* --- Reactions --- */
[data-theme="light"] .reaction-pill { border-color: #E6E6EB; background: #FFFFFF; }
[data-theme="light"] .reaction-pill:hover { border-color: var(--accent); background: rgba(122,126,140,0.04); }
[data-theme="light"] .reaction-pill.active { border-color: var(--accent); background: var(--accent-subtle); color: var(--accent); }

/* --- Stories --- */
[data-theme="light"] .story-ring-unseen { background: var(--accent-subtle); border-color: var(--accent-mid); box-shadow: none; }
[data-theme="light"] .story-add-btn { background: var(--accent) !important; color: #FFFFFF !important; }

/* --- Comments --- */
[data-theme="light"] .comment-input-wrap { border-color: #E6E6EB; background: #F7F7FA; }
[data-theme="light"] .comment-input-wrap:focus-within { border-color: var(--accent); background: #FFFFFF; }
[data-theme="light"] .comment-reply-btn:hover { background: rgba(0,0,0,0.04); }
[data-theme="light"] .comment-thread-replies:hover { border-left-color: var(--accent-muted); }
[data-theme="light"] .comment-item:hover > .comment-left > .comment-thread-line { background: var(--accent-soft); }
[data-theme="light"] .csort-tab { color: #9A9AA3; }
[data-theme="light"] .csort-tab.active { background: var(--accent-subtle); border-color: var(--accent-soft); color: var(--accent); }
[data-theme="light"] @keyframes highlightPost { 0%,100% { background: transparent; } 40% { background: var(--accent-subtle); } }

/* --- Right Sidebar / Widgets --- */
[data-theme="light"] .widget { background: #FFFFFF; border-color: #E6E6EB; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
[data-theme="light"] .widget:hover { border-color: #DADAE2; background: #FFFFFF; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
[data-theme="light"] .widget-title { color: #9A9AA3; }
[data-theme="light"] .friend-item:hover { background: rgba(0,0,0,0.03); }
[data-theme="light"] .friend-status-dot { border-color: #FFFFFF; }
[data-theme="light"] .trend-item:hover { background: rgba(0,0,0,0.03); }
[data-theme="light"] .hashtag-pill { background: #F7F7FA; border-color: #E6E6EB; }
[data-theme="light"] .hashtag-pill:hover { background: var(--accent-hover); border-color: var(--accent); }
[data-theme="light"] .quick-lfg-item { background: #FFFFFF; border-color: #E6E6EB; }

/* --- Explore --- */
[data-theme="light"] .explore-tabs { border-bottom-color: #E6E6EB; }
[data-theme="light"] .trending-item:hover { background: rgba(0,0,0,0.03); }
[data-theme="light"] .explore-card { background: #FFFFFF; border-color: #E6E6EB; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
[data-theme="light"] .explore-card:hover { border-color: #DADAE2; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

/* --- Search / Filters --- */
[data-theme="light"] .search-bar-big { background: #FFFFFF; border-color: #E6E6EB; }
[data-theme="light"] .search-bar-big:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-hover); }
[data-theme="light"] .filter-btn { background: #FFFFFF; border-color: #E6E6EB; color: #6B6B76; }
[data-theme="light"] .filter-btn:hover { border-color: var(--accent-mid); color: #0A0A0F; background: #F7F7FA; }
[data-theme="light"] .filter-btn.active { background: var(--accent-subtle); border-color: var(--accent-mid); color: var(--accent); }

/* --- Games --- */
[data-theme="light"] .game-card { background: #FFFFFF; border-color: #E6E6EB; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
[data-theme="light"] .game-card:hover { border-color: #DADAE2; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
[data-theme="light"] .games-filter-row { border-bottom-color: #E6E6EB; }
[data-theme="light"] .game-follow-btn.following { background: var(--accent-hover); }
[data-theme="light"] .game-select { background: #FFFFFF; border-color: #E6E6EB; color: #0A0A0F; }
[data-theme="light"] .game-select:focus { border-color: var(--accent); }
[data-theme="light"] .game-search-input { background: #FFFFFF; border-color: #E6E6EB; color: #0A0A0F; }
[data-theme="light"] .game-search-input:focus { border-color: var(--accent); }
[data-theme="light"] .game-search-option:hover { background: rgba(0,0,0,0.03); }

/* --- LFG --- */
[data-theme="light"] .lfg-card { background: #FFFFFF; border-color: #E6E6EB; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
[data-theme="light"] .lfg-card:hover { border-color: rgba(34,197,94,0.2); background: #FFFFFF; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

/* --- Messages --- */
[data-theme="light"] .conv-item:hover { background: rgba(0,0,0,0.03); }
[data-theme="light"] .conv-item.active { background: var(--accent-subtle); }
[data-theme="light"] .msg-call-btn:hover { color: var(--accent); background: var(--accent-subtle); }
[data-theme="light"] .msg-header-container { box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
[data-theme="light"] @keyframes callPulse { 0%,100% { box-shadow: 0 0 12px var(--accent-soft); } 50% { box-shadow: 0 0 24px var(--accent-mid); } }

/* --- Notifications --- */
[data-theme="light"] .notif-filter-row { border-bottom-color: #E6E6EB; }
[data-theme="light"] .notif-item:hover { background: rgba(0,0,0,0.02); }
[data-theme="light"] .notif-item.unread { background: transparent; }
[data-theme="light"] .notif-link { background: linear-gradient(135deg, var(--accent-hover), rgba(59,130,246,0.04)); }
[data-theme="light"] .notif-follow { background: rgba(122,126,140,0.04); }

/* --- Leaderboard --- */
[data-theme="light"] .lb-time-filter { border-bottom-color: #E6E6EB; }
[data-theme="light"] .lb-row { background: #FFFFFF; border-color: #E6E6EB; }
[data-theme="light"] .lb-row:hover { border-color: var(--accent-soft); background: #F7F7FA; }

/* --- Buttons --- */
[data-theme="light"] .btn-primary { box-shadow: 0 2px 8px var(--accent-muted); }
[data-theme="light"] .btn-primary:hover { box-shadow: 0 4px 16px var(--accent-mid); }
[data-theme="light"] .btn-primary:active { box-shadow: 0 1px 4px var(--accent-soft); }
[data-theme="light"] .btn-secondary { border-color: #DADAE2; }
[data-theme="light"] .btn-secondary:hover { background: #F7F7FA; border-color: var(--accent); color: var(--accent); }
[data-theme="light"] .btn-ghost:hover { background: rgba(0,0,0,0.04); }

/* --- Modals --- */
[data-theme="light"] .modal-overlay { background: rgba(0,0,0,0.3); }
[data-theme="light"] .modal-box { background: #FFFFFF; border-color: #E6E6EB; box-shadow: 0 24px 64px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04); }
[data-theme="light"] .modal-header { border-bottom-color: #E6E6EB; }
[data-theme="light"] .modal-footer { border-top-color: #E6E6EB; }
[data-theme="light"] .modal-inner { background: #FFFFFF; box-shadow: 0 24px 64px rgba(0,0,0,0.12); }

/* --- Compose --- */
[data-theme="light"] .compose-modal { background: #FFFFFF; border-top: 1px solid #E6E6EB; box-shadow: 0 -12px 48px rgba(0,0,0,0.08), 0 -2px 16px rgba(0,0,0,0.04); }
[data-theme="light"] .compose-modal::before { background: rgba(0,0,0,0.12); }
[data-theme="light"] .compose-modal-header { border-bottom-color: #E6E6EB; }
[data-theme="light"] .compose-modal-header .icon-btn { color: #6B6B76; border-color: #E6E6EB; }
[data-theme="light"] .compose-modal-header .icon-btn:hover { color: #0A0A0F; background: rgba(0,0,0,0.04); }
[data-theme="light"] .compose-tag-select { background: #FFFFFF; border-color: #E6E6EB; color: #0A0A0F; }
[data-theme="light"] .compose-tag-select:hover,
[data-theme="light"] .compose-tag-select:focus { border-color: var(--accent); }

/* --- Inputs --- */
[data-theme="light"] .input-field { background: #F7F7FA; border-color: #E6E6EB; color: #0A0A0F; }
[data-theme="light"] .input-field:focus { border-color: var(--accent); background: #FFFFFF; box-shadow: 0 0 0 3px var(--accent-hover); }

/* --- Settings --- */
[data-theme="light"] .settings-nav-item { color: #6B6B76; }
[data-theme="light"] .settings-nav-item:hover { background: rgba(0,0,0,0.04); color: #0A0A0F; }
[data-theme="light"] .settings-nav-item.active { color: #0A0A0F; background: var(--accent-soft); }
[data-theme="light"] .appx-theme, [data-theme="light"] .appx-style { background: #F7F7FA; }
[data-theme="light"] .settings-field input,
[data-theme="light"] .settings-field textarea,
[data-theme="light"] .settings-field select { background: #F7F7FA; border-color: #E6E6EB; color: #0A0A0F; }
[data-theme="light"] .settings-field input:focus,
[data-theme="light"] .settings-field textarea:focus,
[data-theme="light"] .settings-field select:focus { border-color: var(--accent); background: #FFFFFF; }
[data-theme="light"] .settings-handle-preview { background: #F7F7FA; border-color: #E6E6EB; color: #9A9AA3; }

/* --- Auth --- */
[data-theme="light"] .auth-tab-btn { color: #6B6B76; }
[data-theme="light"] .auth-tab-btn.active { background: var(--accent-subtle); color: var(--accent); }
[data-theme="light"] .auth-box { background: #FFFFFF; box-shadow: 0 8px 32px rgba(0,0,0,0.08); }

/* --- Profile --- */
[data-theme="light"] .profile-header-inner { background: linear-gradient(135deg, var(--accent-subtle), rgba(59,130,246,0.04)); border-color: #E6E6EB; }
[data-theme="light"] .profile-social-link:hover { background: rgba(0,0,0,0.04); color: var(--accent); }
[data-theme="light"] .profile-stat-item { background: #FFFFFF; border-color: #E6E6EB; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
[data-theme="light"] .profile-game-tag:hover { border-color: var(--accent-muted); color: var(--accent); background: rgba(122,126,140,0.04); }
[data-theme="light"] .profile-tab:hover { background: rgba(0,0,0,0.02); }
[data-theme="light"] .profile-tab.active::after { background: linear-gradient(to top, rgba(122,126,140,0.04), transparent); }
[data-theme="light"] .profile-grid-bg { background-image: linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px); }
[data-theme="light"] .profile-glow { background: radial-gradient(ellipse at 50% 60%, var(--accent-subtle) 0%, rgba(59,130,246,0.03) 40%, transparent 70%); }
[data-theme="light"] .profile-avatar-lg { box-shadow: 0 0 0 4px #F7F7FA, 0 0 16px var(--accent-soft) !important; }
[data-theme="light"] .profile-badge { background: var(--accent-subtle); }
[data-theme="light"] .profile-actions { border-bottom-color: #E6E6EB; }

/* --- Plans --- */
[data-theme="light"] .plan-badge-plus { background: var(--accent-hover); color: var(--accent); border-color: var(--accent-muted); }
[data-theme="light"] .plans-current-banner { background: rgba(122,126,140,0.04); border-color: var(--accent-soft); }
[data-theme="light"] .plan-card-featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 8px 32px var(--accent-soft); }

/* --- Clans --- */
[data-theme="light"] .clan-card { background: #FFFFFF; border-color: #E6E6EB; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
[data-theme="light"] .clan-card:hover { border-color: var(--accent-muted); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

/* --- People --- */
[data-theme="light"] .people-card { background: #FFFFFF; border-color: #E6E6EB; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
[data-theme="light"] .people-card:hover { border-color: var(--accent-soft); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

/* --- Clips --- */
[data-theme="light"] .clip-video-wrapper { background: linear-gradient(135deg, rgba(122,126,140,0.04), rgba(59,130,246,0.03)); }

/* --- AI Chips --- */
[data-theme="light"] .insight-chip { background: rgba(122,126,140,0.05); border-color: var(--accent-soft); color: var(--accent); }
[data-theme="light"] .insight-chip:hover { background: var(--accent-hover); border-color: var(--accent-glow); }

/* --- Admin --- */
[data-theme="light"] .adm-btn-active { background: var(--accent-subtle); border-color: var(--accent-muted); color: var(--accent); }
[data-theme="light"] .adm-nav-item.active { background: var(--accent-subtle); border-color: var(--accent-soft); color: var(--accent); }
[data-theme="light"] .adm-nav-item.active::before { background: var(--accent); }
[data-theme="light"] .adm-studio-btn { background: var(--accent-subtle); border-color: var(--accent-soft); color: var(--accent); }
[data-theme="light"] .sidebar-user-badge { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
[data-theme="light"] .sidebar-user-badge:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.12); }

/* --- Hashtags --- */
[data-theme="light"] .hashtag-pill:hover { background: var(--accent-subtle); }

/* --- Legal --- */
[data-theme="light"] .legal-tab { color: #6B6B76; }
[data-theme="light"] .legal-tab.active { background: var(--accent-subtle); border-color: var(--accent-soft); color: var(--accent); }

/* --- Analytics --- */
[data-theme="light"] .analytics-game-row:hover,
[data-theme="light"] .analytics-top-post-row:hover { background: rgba(0,0,0,0.02); }

/* --- Sub Tour --- */
[data-theme="light"] .sub-tour-header { background: linear-gradient(135deg, var(--accent-subtle), rgba(59,130,246,0.04)); }
[data-theme="light"] .onboard-dot { background: rgba(0,0,0,.1); }
[data-theme="light"] .onboard-card { border-color: rgba(0,0,0,.08); }
[data-theme="light"] .onboard-step-icon { background: linear-gradient(135deg, var(--accent-subtle), rgba(59,130,246,.04)); border-color: var(--accent-soft); }
[data-theme="light"] .onboard-footer { border-top-color: rgba(0,0,0,.06); }

/* --- Stories Upload --- */
[data-theme="light"] .story-upload-zone:hover { background: rgba(0,0,0,0.02); }

/* --- Toasts --- */
[data-theme="light"] .toast { background: #FFFFFF; border-color: #E6E6EB; box-shadow: 0 4px 16px rgba(0,0,0,0.08); color: #0A0A0F; }
[data-theme="light"] .toast.info { border-color: var(--accent-soft); }

/* --- Mobile Menu --- */
[data-theme="light"] .mobile-menu-btn { color: #6B6B76; }
[data-theme="light"] .mobile-menu-btn:hover { background: rgba(0,0,0,0.04); color: #0A0A0F; }

/* --- Reply Feed --- */
[data-theme="light"] .reply-feed-quote-block { border-left: 2px solid var(--accent-mid); background: rgba(122,126,140,0.03); }
[data-theme="light"] .reply-feed-item:hover .reply-feed-bubble { border-color: #DADAE2; }
[data-theme="light"] .detail-reply-media-btn:hover { color: var(--accent); background: var(--accent-subtle); }

/* --- Misc Elements --- */
[data-theme="light"] .call-status { color: #6B6B76; }
[data-theme="light"] .call-timer { color: #0A0A0F; }

/* ================================================================
   STEAM CONNECTION & PRESENCE
   ================================================================ */

/* Connected Accounts Card */
.connected-account-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
  transition: border-color 0.2s;
}
.connected-account-card:hover { border-color: rgba(255,255,255,0.12); }

.connected-account-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.connected-account-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.connected-account-icon.steam-icon {
  background: linear-gradient(135deg, #1b2838, #2a475e);
  color: #c7d5e0;
}
.connected-account-icon.x-icon {
  background: #000;
  border: 1px solid var(--border);
  color: #e7e9ea;
}

/* ── X import modal (options → preview → confirm) ── */
.ximp-box { max-width: 560px; width: 100%; }
.ximp-body { max-height: 56vh; overflow-y: auto; padding: 4px 2px; }
.ximp-opts { display: flex; flex-direction: column; gap: 10px; }
.ximp-check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-secondary); cursor: pointer; }
.ximp-check input { accent-color: var(--accent, #cc785c); }
.ximp-note { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
.ximp-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border); margin-top: 12px; }
.ximp-list { display: flex; flex-direction: column; gap: 6px; }
.ximp-item {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm, 10px);
  background: var(--bg-elevated, rgba(255,255,255,.02));
}
.ximp-item input { margin-top: 3px; accent-color: var(--accent, #cc785c); }
.ximp-item-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ximp-item-text { font-size: 13px; color: var(--text-primary); line-height: 1.4; word-break: break-word; }
.ximp-item-meta { font-size: 11.5px; color: var(--text-muted); }
.ximp-dupe { opacity: .5; cursor: default; }

/* ── imported-from-X post furniture: quiet by design ── */
.post-src-x { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); font-size: 11.5px; }
.post-src-x svg { opacity: .65; flex: none; }
.post-src-x a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.post-src-x a:hover { color: var(--text-secondary); }
.post-x-likes {
  margin-left: auto; align-self: center;
  font-size: 11px; color: var(--text-muted); white-space: nowrap;
}
.connected-account-info { flex: 1; }
.connected-account-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
}
.connected-account-status {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.connected-account-details {
  padding-top: 4px;
}
.connected-account-controls {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* Steam profile info within settings */
.steam-profile-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.steam-mini-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-xs);
  object-fit: cover;
}
.steam-persona-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}
.steam-now-playing {
  font-size: 13px;
  color: var(--accent-green);
  margin-bottom: 8px;
}
.steam-game-icon { margin-right: 2px; }

/* Steam state badges */
.steam-state-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-weight: 500;
}
.steam-state-0, .steam-state-offline, .steam-state-null { background: rgba(255,255,255,0.06); color: var(--text-muted); }
.steam-state-1 { background: rgba(87,203,222,0.15); color: #57cbde; }
.steam-state-2 { background: rgba(239,68,68,0.15); color: #ef4444; }
.steam-state-3 { background: rgba(249,115,22,0.15); color: #f97316; }
.steam-state-4 { background: rgba(249,115,22,0.1); color: #d97706; }
.steam-state-5, .steam-state-6 { background: rgba(34,197,94,0.15); color: #22c55e; }

/* Steam Connect Button */
.steam-connect-btn {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

/* Profile Steam Presence */
.profile-steam-presence {
  margin: 8px 0 4px;
  padding: 8px 12px;
  background: rgba(27,40,56,0.35);
  border: 1px solid rgba(42,71,94,0.3);
  border-radius: var(--radius);
  font-size: 13px;
}
.steam-presence-header {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
}
.steam-presence-icon { color: #c7d5e0; flex-shrink: 0; }
.steam-presence-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.steam-presence-dot.steam-state-0,
.steam-presence-dot.steam-state-offline,
.steam-presence-dot.steam-state-null { background: var(--text-muted); }
.steam-presence-dot.steam-state-1 { background: #57cbde; }
.steam-presence-dot.steam-state-2 { background: #ef4444; }
.steam-presence-dot.steam-state-3 { background: #f97316; }
.steam-presence-dot.steam-state-4 { background: #d97706; }
.steam-presence-dot.steam-state-5,
.steam-presence-dot.steam-state-6 { background: #22c55e; }
.steam-presence-label { font-size: 13px; }
.steam-presence-game {
  margin-top: 4px;
  padding-left: 20px;
  color: var(--accent-green);
  font-size: 12px;
}
.steam-game-link {
  color: inherit;
  text-decoration: none;
}
.steam-game-link:hover {
  text-decoration: underline;
}

/* Light theme overrides */
[data-theme="light"] .connected-account-card { background: rgba(0,0,0,0.02); }
[data-theme="light"] .connected-account-icon.steam-icon { background: linear-gradient(135deg, #1b2838, #2a475e); }
[data-theme="light"] .profile-steam-presence { background: rgba(27,40,56,0.06); border-color: rgba(27,40,56,0.12); }
[data-theme="light"] .steam-state-0, [data-theme="light"] .steam-state-offline, [data-theme="light"] .steam-state-null { background: rgba(0,0,0,0.05); }

/* ================================================================
   STEAM AI INSIGHTS
   ================================================================ */
/* Steam Insights — Premium Gaming Intelligence */
.insights-container { padding: 0 0 24px; }

/* ---- Motion ---- */
@keyframes skel-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.7; } }
@keyframes insight-load-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
@keyframes stagger-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes card-pop { from { opacity: 0; transform: scale(0.96) translateY(4px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes profile-slide { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.stagger-1 { animation: stagger-up 0.4s ease both; animation-delay: 0.05s; }
.stagger-2 { animation: stagger-up 0.4s ease both; animation-delay: 0.15s; }
.stagger-3 { animation: stagger-up 0.4s ease both; animation-delay: 0.25s; }
.stagger-4 { animation: stagger-up 0.4s ease both; animation-delay: 0.35s; }

/* ---- Identity Hero ---- */
.insights-identity { margin: 0 16px 16px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 28px 24px 20px; text-align: center; min-height: 100px; }

.identity-skel { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.skel-block { background: var(--bg-tertiary); border-radius: var(--radius-xs); animation: skel-pulse 1.4s ease-in-out infinite; }
.skel-identity-title { width: 200px; height: 22px; }
.skel-identity-sub { width: 260px; height: 14px; }
.identity-skel-stats { display: flex; gap: var(--sp-4); margin-top: 6px; }
.skel-stat { width: 50px; height: 28px; }

.identity-playstyle { font-size: 22px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.5px; line-height: 1.2; margin-bottom: 8px; }
.identity-insight { font-size: 13px; color: var(--text-secondary); line-height: 1.5; max-width: 420px; margin: 0 auto 16px; }
.identity-now { font-size: 11px; color: var(--text-muted); }

.identity-stats { display: inline-flex; gap: 0; margin-bottom: 10px; background: var(--bg-tertiary); border-radius: var(--radius-sm); padding: 8px 4px; }
.identity-stat { text-align: center; padding: 0 14px; display: flex; align-items: baseline; gap: var(--sp-1); }
.identity-stat-val { font-size: 16px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.3px; }
.identity-stat-label { font-size: 10px; color: var(--text-muted); }
.identity-stat-sep { width: 1px; background: var(--border-color); align-self: stretch; margin: 2px 0; }

.insights-hero-empty { padding: 28px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.insights-hero-empty-text { font-size: 13px; color: var(--text-muted); }

/* ---- Profile Section ---- */
.insights-profile-section { margin: 0 16px 16px; }
.profile-generating { display: flex; align-items: center; gap: var(--sp-3); padding: 12px 16px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 12px; color: var(--text-muted); }
.profile-generating-bar { width: 100px; height: 2px; background: var(--bg-tertiary); border-radius: 2px; overflow: hidden; flex-shrink: 0; }
.profile-generating-bar-fill { width: 40%; height: 100%; background: var(--text-muted); border-radius: 2px; animation: insight-load-slide 1.5s ease-in-out infinite; }
.profile-error { padding: 12px 16px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 12px; color: var(--text-muted); }

.insights-profile { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 18px 20px; }
.profile-reveal { animation: profile-slide 0.4s ease both; }
.insights-profile-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.insights-profile-archetype { font-size: 14px; font-weight: 800; color: var(--text-primary); }
.insights-profile-summary { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 14px; }
.insights-profile-scores { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-bottom: 12px; }
.ip-score-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3px; }
.ip-score-label { font-size: 10px; color: var(--text-muted); }
.ip-score-val { font-size: 10px; font-weight: 700; }
.ip-score-bar { height: 3px; background: var(--bg-tertiary); border-radius: 2px; overflow: hidden; }
.ip-score-fill { height: 100%; border-radius: 2px; transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.insights-profile-tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.ip-tag { background: var(--bg-tertiary); color: var(--text-secondary); padding: 3px 8px; border-radius: var(--radius-xs); font-size: 10px; font-weight: 500; }
.ip-strength { color: var(--accent-green); background: rgba(34,197,94,0.08); }
.insights-profile-expand { font-size: 11px; font-weight: 600; color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; gap: 3px; transition: color 0.15s; }
.insights-profile-expand:hover { color: var(--text-primary); }

/* ---- Tools Section ---- */
.insights-tools { padding: 0 16px; margin-top: 4px; }
.insights-tools-label { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px; }
.insight-section-label { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 8px; }
.insight-section-divider { height: 1px; background: var(--border-color); margin: 16px 0; }

/* ---- Insight Cards ---- */
.insights-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.insight-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 12px 14px; cursor: pointer; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.insight-card:hover { border-color: var(--text-muted); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.insight-card:active { transform: translateY(0); box-shadow: none; }
.reveal-card { opacity: 0; }
.card-enter { animation: card-pop 0.35s ease both; }
.insight-card-title { font-size: 12px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.insight-card-cta { font-size: 10px; font-weight: 600; color: var(--text-muted); display: inline-flex; align-items: center; gap: 3px; transition: color 0.15s; }
.insight-card:hover .insight-card-cta { color: var(--text-secondary); }
.insight-card-cta svg { flex-shrink: 0; }

/* ---- Insight Panel ---- */
.insight-panel { margin: 16px 16px 0; }

.insight-loading { text-align: center; padding: 36px 20px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); }
.insight-loading-bar { width: 200px; height: 3px; background: var(--bg-tertiary); border-radius: 2px; margin: 0 auto 16px; overflow: hidden; }
.insight-loading-bar-fill { width: 40%; height: 100%; background: var(--text-muted); border-radius: 2px; animation: insight-load-slide 1.5s ease-in-out infinite; }
@keyframes insight-load-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
.insight-loading-text { font-size: 13px; color: var(--text-primary); font-weight: 600; }
.insight-loading-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

.insight-error { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 20px; color: var(--accent-red, #ef4444); background: rgba(239,68,68,0.06); border: 1px solid rgba(239,68,68,0.12); border-radius: var(--radius-sm); font-size: 13px; }
.insight-error-icon { width: 24px; height: 24px; background: rgba(239,68,68,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }

/* ---- Insight Results (shared) ---- */
.insight-result { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 24px; }

/* ---- Input Sections ---- */
.insight-input-section { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 24px; }
.insight-input-header h3 { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.insight-input-desc { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; line-height: 1.5; }
.insight-input-row { display: flex; gap: var(--sp-2); }
.insight-input { flex: 1; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 10px 14px; color: var(--text-primary); font-size: 13px; outline: none; transition: border-color 0.15s; }
.insight-input:focus { border-color: var(--text-muted); }
.insight-input::placeholder { color: var(--text-muted); }
.insight-input-btn { white-space: nowrap; border-radius: var(--radius-sm); }

/* ---- Personality Result ---- */
.personality-header { margin-bottom: 18px; text-align: center; padding-bottom: 18px; border-bottom: 1px solid var(--border-color); }
.personality-archetype-label { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 4px; }
.personality-archetype { font-size: 22px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.3px; margin-bottom: 10px; }
.personality-stats-row { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.personality-stat-chip { background: var(--bg-tertiary); color: var(--text-muted); padding: 3px 10px; border-radius: var(--radius-lg); font-size: 11px; font-weight: 500; }
.personality-summary { font-size: 13px; line-height: 1.65; color: var(--text-secondary); padding: 14px 16px; background: var(--bg-tertiary); border-radius: var(--radius-sm); margin-bottom: 0; }
.personality-scores-section { }
.personality-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.personality-score-item { }
.personality-score-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.personality-score-label { font-size: 11px; color: var(--text-muted); font-weight: 500; }
.personality-score-bar { height: 4px; background: var(--bg-tertiary); border-radius: 2px; overflow: hidden; }
.personality-score-fill { height: 100%; border-radius: 2px; transition: width 0.5s ease; }
.personality-score-val { font-size: 12px; font-weight: 700; }
.personality-section { margin-bottom: 16px; }
.personality-traits { display: flex; flex-wrap: wrap; gap: 5px; }
.personality-trait-tag { background: var(--bg-tertiary); color: var(--text-secondary); padding: 4px 10px; border-radius: var(--radius-xs); font-size: 11px; font-weight: 500; }
.personality-trait-tag.strength { color: var(--accent-green); background: rgba(34,197,94,0.08); }
.personality-trait-tag.blindspot { color: var(--accent-red, #ef4444); background: rgba(239,68,68,0.06); }
.personality-insight-item { padding: 10px 14px; background: var(--bg-tertiary); border-radius: var(--radius-xs); margin-bottom: 5px; font-size: 12px; line-height: 1.55; color: var(--text-primary); border-left: 2px solid var(--border-color); }
.personality-gaming-style { font-size: 12px; color: var(--text-muted); padding: 12px 14px; background: var(--bg-tertiary); border-radius: var(--radius-sm); line-height: 1.55; margin-top: 4px; }

/* ---- Prediction Result ---- */
.prediction-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.prediction-header-left { flex: 1; min-width: 0; }
.prediction-game-label { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 2px; }
.prediction-game-name { font-size: 18px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.2px; }
.prediction-chance-ring { flex-shrink: 0; }
.prediction-drop { font-size: 12px; color: var(--accent-orange); padding: 8px 12px; background: rgba(249,115,22,0.08); border-radius: var(--radius-sm); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.prediction-verdict { font-size: 13px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 14px; }
.prediction-similar { margin-bottom: 12px; }
.prediction-similar-tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: 6px; }
.prediction-similar-tag { background: var(--bg-tertiary); color: var(--text-secondary); padding: 3px 10px; border-radius: var(--radius-xs); font-size: 11px; font-weight: 500; }
.prediction-similar-outcome { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.prediction-warning { font-size: 12px; color: var(--accent-red, #ef4444); padding: 10px 14px; background: rgba(239,68,68,0.06); border: 1px solid rgba(239,68,68,0.1); border-radius: var(--radius-sm); line-height: 1.5; display: flex; align-items: flex-start; gap: var(--sp-2); }
.prediction-warning svg { flex-shrink: 0; margin-top: 1px; }

/* ---- Timeline Result ---- */
.timeline-header { margin-bottom: 14px; }
.timeline-title { font-size: 16px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.2px; }
.timeline-meta { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.timeline-narrative { font-size: 13px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 18px; padding: 12px 14px; background: var(--bg-tertiary); border-radius: var(--radius-sm); }
.timeline-eras { position: relative; }
.timeline-era { display: flex; gap: 14px; margin-bottom: 20px; }
.timeline-era:last-child { margin-bottom: 0; }
.timeline-era-marker { display: flex; flex-direction: column; align-items: center; width: 12px; flex-shrink: 0; padding-top: 4px; }
.timeline-era-dot { width: 8px; height: 8px; background: var(--text-muted); border-radius: 50%; z-index: 1; flex-shrink: 0; }
.timeline-era-dot.first { width: 10px; height: 10px; background: var(--text-primary); }
.timeline-era-line { flex: 1; width: 2px; background: var(--border-color); margin-top: 4px; }
.timeline-era-content { flex: 1; min-width: 0; }
.timeline-era-top { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: 2px; }
.timeline-era-period { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.timeline-era-hours { font-size: 10px; color: var(--text-muted); background: var(--bg-tertiary); padding: 1px 6px; border-radius: 3px; font-weight: 500; }
.timeline-era-name { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.timeline-era-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 6px; }
.timeline-era-games { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.timeline-game-tag { background: var(--bg-tertiary); color: var(--text-secondary); padding: 2px 8px; border-radius: var(--radius-xs); font-size: 11px; font-weight: 500; }
.timeline-game-tag.current { color: var(--accent-green); background: rgba(34,197,94,0.08); }
.timeline-current { margin-top: 18px; padding: 14px 16px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); }
.timeline-current-badge { display: inline-block; font-size: 10px; font-weight: 700; color: var(--accent-green); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 4px; padding: 2px 8px; background: rgba(34,197,94,0.08); border-radius: var(--radius-xs); }
.timeline-current-name { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.timeline-current-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 6px; }

/* ---- Skills Result ---- */
.skills-header { margin-bottom: 16px; }
.skills-title { font-size: 16px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.2px; }
.skills-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.skills-dna { margin-bottom: 0; }
.skills-dna-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.skills-dna-item { }
.skills-dna-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.skills-dna-label { font-size: 11px; color: var(--text-muted); font-weight: 500; }
.skills-dna-bar { height: 4px; background: var(--bg-tertiary); border-radius: 2px; overflow: hidden; }
.skills-dna-fill { height: 100%; border-radius: 2px; transition: width 0.5s ease; }
.skills-dna-val { font-size: 11px; font-weight: 700; }
.skills-map { }
.skill-item { padding: 12px 14px; background: var(--bg-tertiary); border-radius: var(--radius-sm); margin-bottom: 6px; }
.skill-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.skill-name { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.skill-level { font-size: 12px; font-weight: 800; }
.skill-bar { height: 3px; background: var(--bg-secondary); border-radius: 2px; overflow: hidden; margin-bottom: 8px; }
.skill-bar-fill { height: 100%; border-radius: 2px; transition: width 0.4s ease; }
.skill-transfer-row { font-size: 11px; color: var(--text-secondary); margin-bottom: 4px; display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.skill-arrow { margin: 0 3px; color: var(--text-muted); }
.skill-from { color: var(--text-muted); }
.skill-to { color: var(--text-secondary); font-weight: 500; }
.skill-insight { font-size: 11px; color: var(--text-muted); line-height: 1.4; }
.skills-hidden { }
.hidden-advantage { padding: 12px 14px; background: var(--bg-tertiary); border-radius: var(--radius-sm); margin-bottom: 6px; }
.hidden-advantage-header { font-size: 12px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; display: flex; align-items: center; gap: var(--sp-1); }
.hidden-desc { font-size: 11px; color: var(--text-secondary); line-height: 1.45; }
.hidden-from, .hidden-to { font-weight: 600; }
.hidden-arrow { margin: 0 3px; color: var(--text-muted); }
.skills-recommendation { margin-top: 14px; padding: 12px 14px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 12px; color: var(--text-primary); line-height: 1.55; display: flex; align-items: flex-start; gap: var(--sp-2); }
.skills-recommendation svg { flex-shrink: 0; color: var(--accent-orange); margin-top: 1px; }

/* ---- Verdict Result ---- */
.verdict-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.verdict-game-label { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 2px; }
.verdict-game { font-size: 18px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.2px; }
.verdict-badge { padding: 5px 14px; border-radius: var(--radius-xs); font-size: 12px; font-weight: 800; color: #fff; letter-spacing: 0.5px; text-transform: uppercase; flex-shrink: 0; }
.verdict-text { font-size: 13px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 16px; }
.verdict-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.verdict-stat { text-align: center; padding: 12px 6px; background: var(--bg-tertiary); border-radius: var(--radius-sm); }
.verdict-stat-val { display: block; font-size: 18px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.3px; }
.verdict-stat-of { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.verdict-stat-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; margin-top: 2px; display: block; }
.verdict-confidence { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.verdict-confidence-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* ---- Responsive ---- */
@media (max-width: 600px) {
  .insights-identity { padding: 22px 16px 16px; }
  .identity-playstyle { font-size: 18px; }
  .identity-stats { padding: 6px 2px; }
  .identity-stat { padding: 0 10px; }
  .identity-stat-val { font-size: 14px; }
  .insights-grid { grid-template-columns: 1fr 1fr; }
  .insights-profile-scores { grid-template-columns: 1fr; }
  .personality-scores { grid-template-columns: 1fr; }
  .skills-dna-grid { grid-template-columns: 1fr 1fr; }
  .verdict-stats { grid-template-columns: repeat(2, 1fr); }
  .prediction-header { flex-direction: column; text-align: center; gap: var(--sp-3); }
}

/* ================================================================
   MUSIC PICKER
   ================================================================ */
.music-picker-box { max-width: 480px; max-height: 80vh; display: flex; flex-direction: column; }
.music-picker-search { display: flex; align-items: center; gap: var(--sp-2); padding: 12px 16px; border-bottom: 1px solid var(--border); }
.music-picker-search input { flex: 1; background: none; border: none; outline: none; color: var(--text-primary); font-size: 14px; }
.music-picker-search input::placeholder { color: var(--text-muted); }
.music-picker-genres { display: flex; gap: 6px; padding: 10px 16px; overflow-x: auto; border-bottom: 1px solid var(--border); }
.music-genre-chip { background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 4px 12px; font-size: 12px; color: var(--text-muted); cursor: pointer; white-space: nowrap; transition: all .15s; }
.music-genre-chip:hover { background: rgba(255,255,255,0.08); }
.music-genre-chip.active { background: var(--accent); color: white; border-color: var(--accent); }
.music-picker-list { flex: 1; overflow-y: auto; padding: 8px 0; min-height: 200px; max-height: 400px; }
.music-track-item { display: flex; align-items: center; gap: var(--sp-3); padding: 10px 16px; cursor: pointer; transition: background .12s; }
.music-track-item:hover { background: rgba(255,255,255,0.04); }
.music-track-item.selected { background: var(--accent-soft); border-left: 3px solid var(--accent); }
.music-track-cover { width: 44px; height: 44px; border-radius: var(--radius-sm); flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.music-track-play-icon { position: absolute; color: white; font-size: 14px; opacity: 0; transition: opacity .15s; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.music-track-item:hover .music-track-play-icon { opacity: 1; }
.music-track-info { flex: 1; min-width: 0; }
.music-track-title { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-track-artist { font-size: 11px; color: var(--text-muted); }
.music-track-genre { font-size: 10px; background: rgba(255,255,255,0.06); padding: 1px 6px; border-radius: var(--radius-xs); color: var(--text-muted); }
.music-track-duration { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.music-track-preview-btn { background: none; border: 1px solid rgba(255,255,255,0.1); border-radius: 50%; width: 32px; height: 32px; color: var(--text-primary); cursor: pointer; font-size: 12px; flex-shrink: 0; transition: all .12s; display: flex; align-items: center; justify-content: center; }
.music-track-preview-btn:hover { background: rgba(255,255,255,0.08); border-color: var(--accent); }
.music-picker-footer { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: 12px 16px; border-top: 1px solid var(--border); }

/* Story music info bar */
.sv-music-info { position: absolute; bottom: 60px; left: 16px; right: 60px; display: flex; align-items: center; gap: var(--sp-2); color: white; font-size: 12px; z-index: 5; }
.sv-music-icon { font-size: 16px; animation: musicSpin 3s linear infinite; }
@keyframes musicSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.sv-music-marquee { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 4px rgba(0,0,0,.6); }

/* ================================================================
   TAKE CREATOR — Fullscreen Immersive
   ================================================================ */
.tc-overlay {
  position: fixed; inset: 0; z-index: var(--z-top); background: var(--bg-primary);
  display: flex; flex-direction: column;
}
.tc-overlay.hidden { display: none; }
.tc-phase { display: flex; flex-direction: column; height: 100%; }
.tc-phase.hidden { display: none; }

/* Top bar */
.tc-top-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  padding-top: max(10px, calc(env(safe-area-inset-top, 0px) + 6px));
  flex-shrink: 0; z-index: 2;
}
.tc-close-btn {
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.06); display: flex; align-items: center;
  justify-content: center; cursor: pointer; transition: background .12s;
  -webkit-tap-highlight-color: transparent;
}
.tc-close-btn:hover { background: rgba(255,255,255,.1); }
.tc-title {
  font-size: 15px; font-weight: 700; color: white; letter-spacing: -0.01em;
}

/* Phase 1: Preview area */
.tc-preview-area {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 0 16px; min-height: 0; position: relative;
}
.tc-upload-prompt {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; cursor: pointer; padding: 48px 32px;
  border: 1.5px dashed rgba(255,255,255,.1); border-radius: var(--radius-md);
  width: 100%; max-width: 320px; transition: all .15s;
  background: rgba(255,255,255,.02);
}
.tc-upload-prompt:hover { border-color: var(--accent-strong); background: rgba(122,126,140,.03); }
.tc-upload-icon { opacity: .5; }
.tc-upload-label { font-size: 15px; font-weight: 600; color: rgba(255,255,255,.8); margin: 0; }
.tc-upload-hint { font-size: 12px; color: rgba(255,255,255,.3); }

.tc-video-preview {
  width: 100%; max-width: 320px; aspect-ratio: 9/16;
  border-radius: var(--radius); overflow: hidden; position: relative;
  background: #000; box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.tc-video-preview video { width: 100%; height: 100%; object-fit: cover; }
.tc-preview-overlay {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 10px;
}
.tc-change-btn {
  display: flex; align-items: center; gap: 5px;
  background: rgba(0,0,0,.5); backdrop-filter: blur(8px);
  border: none; border-radius: var(--radius-sm); padding: 6px 10px;
  color: white; font-size: 11px; font-weight: 600; cursor: pointer;
  transition: background .12s;
}
.tc-change-btn:hover { background: rgba(0,0,0,.7); }
.tc-duration-badge {
  background: rgba(0,0,0,.5); backdrop-filter: blur(8px);
  padding: 4px 8px; border-radius: var(--radius-xs);
  font-size: 11px; font-weight: 700; color: white;
  font-variant-numeric: tabular-nums;
}

/* Phase 1: Bottom bar */
.tc-bottom-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  padding-bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 8px));
  flex-shrink: 0; gap: var(--sp-3);
}
.tc-gallery-btn {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; color: rgba(255,255,255,.5);
  font-size: 12px; font-weight: 600; cursor: pointer; padding: 8px 4px;
  transition: color .12s;
}
.tc-gallery-btn:hover { color: rgba(255,255,255,.8); }
.tc-next-btn {
  display: flex; align-items: center; gap: 6px;
  background: var(--accent); color: white; border: none; border-radius: var(--radius-sm);
  padding: 10px 20px; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: all .15s; letter-spacing: -0.01em;
  box-shadow: 0 2px 10px var(--accent-strong);
}
.tc-next-btn:disabled { opacity: .35; pointer-events: none; box-shadow: none; }
.tc-next-btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(122,126,140,.4); }
.tc-next-btn:not(:disabled):active { transform: scale(.97); }

/* Phase 2: Publish scroll */
.tc-publish-scroll {
  flex: 1; overflow-y: auto; padding: 0 16px 16px;
  -webkit-overflow-scrolling: touch;
}

/* Mini preview */
.tc-mini-preview {
  width: 100px; aspect-ratio: 9/16; border-radius: var(--radius-sm); overflow: hidden;
  position: relative; margin: 8px auto 20px; background: #000;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.tc-mini-preview video { width: 100%; height: 100%; object-fit: cover; }
.tc-mini-duration {
  position: absolute; bottom: 4px; right: 4px;
  background: rgba(0,0,0,.6); padding: 1px 5px; border-radius: 3px;
  font-size: 9px; font-weight: 700; color: white;
}

/* Field groups */
.tc-field-group { margin-bottom: 16px; }
.tc-label {
  display: block; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.6);
  margin-bottom: 6px; letter-spacing: 0.03em; text-transform: uppercase;
}
.tc-required {
  font-size: 9px; font-weight: 700; color: #ef4444;
  background: rgba(239,68,68,.1); padding: 1px 5px; border-radius: 3px;
  margin-left: 4px; text-transform: uppercase; letter-spacing: 0.04em;
  vertical-align: middle;
}
.tc-hint-inline {
  font-size: 10px; font-weight: 500; color: var(--text-muted);
  text-transform: none; letter-spacing: 0; margin-left: 4px;
}

/* Game button */
.tc-game-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-sm); padding: 12px 14px; color: var(--text-primary);
  font-size: 14px; font-weight: 500; cursor: pointer; transition: all .12s;
}
.tc-game-btn:hover { border-color: var(--accent-strong); background: rgba(255,255,255,.06); }
.tc-game-btn-text { flex: 1; text-align: left; }
.tc-game-btn.selected { border-color: var(--accent-strong); }
.tc-game-btn.selected .tc-game-btn-text { font-weight: 600; }

/* Textarea */
.tc-textarea {
  width: 100%; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-sm); padding: 12px 14px; color: var(--text-primary);
  font-size: 14px; font-family: inherit; resize: none; outline: none;
  transition: border-color .12s; line-height: 1.5;
}
.tc-textarea:focus { border-color: rgba(122,126,140,.35); }
.tc-textarea::placeholder { color: rgba(255,255,255,.25); }
.tc-char-count {
  display: block; text-align: right; font-size: 10px; color: var(--text-muted);
  margin-top: 4px; font-variant-numeric: tabular-nums;
}

/* Tags input */
.tc-tags-input {
  display: flex; align-items: center;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-sm); overflow: hidden; transition: border-color .12s;
}
.tc-tags-input:focus-within { border-color: rgba(122,126,140,.35); }
.tc-tag-prefix {
  padding: 10px 0 10px 12px; color: rgba(122,126,140,.6); font-weight: 700;
  font-size: 14px; user-select: none;
}
.tc-tag-field {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text-primary); font-size: 13px; padding: 10px 12px 10px 4px;
}
.tc-tag-field::placeholder { color: rgba(255,255,255,.2); }
.tc-tags-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.take-hashtag-pill {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  background: var(--accent-soft); border: 1px solid var(--accent-mid);
  padding: 4px 8px 4px 10px; border-radius: var(--radius-xs);
  font-size: 12px; font-weight: 600; color: #c4b5fd;
}
.take-hashtag-pill button {
  background: none; border: none; color: rgba(255,255,255,.35); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0 2px; transition: color .1s;
}
.take-hashtag-pill button:hover { color: #ef4444; }

/* Option button (music, etc.) */
.tc-option-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-sm); padding: 12px 14px; color: var(--text-secondary);
  font-size: 13px; font-weight: 500; cursor: pointer; transition: all .12s;
}
.tc-option-btn:hover { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.06); }
.tc-option-btn svg:last-child { margin-left: auto; }

/* Upload progress */
.tc-progress { margin-top: 12px; }
.tc-progress-bar { height: 3px; background: rgba(255,255,255,.06); border-radius: 2px; overflow: hidden; }
.tc-progress-fill { height: 100%; background: var(--accent); width: 0; transition: width .15s; }
.tc-progress-text { font-size: 11px; color: var(--text-muted); margin-top: 4px; display: block; }

/* Publish footer */
.tc-publish-footer {
  padding: 12px 16px;
  padding-bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 8px));
  flex-shrink: 0;
}
.tc-publish-btn {
  width: 100%; padding: 14px; border: none; border-radius: var(--radius);
  background: var(--accent); color: white; font-size: 15px; font-weight: 700;
  cursor: pointer; transition: all .15s; letter-spacing: -0.01em;
  box-shadow: 0 2px 12px var(--accent-strong);
}
.tc-publish-btn:disabled { opacity: .3; pointer-events: none; box-shadow: none; }
.tc-publish-btn:not(:disabled):hover { box-shadow: 0 4px 20px rgba(122,126,140,.4); }
.tc-publish-btn:not(:disabled):active { transform: scale(.98); }

/* Game picker sheet */
.tc-game-picker {
  position: absolute; inset: 0; z-index: 3; background: #0a0a18;
  display: flex; flex-direction: column;
  animation: tcSheetIn .2s ease;
}
.tc-game-picker.hidden { display: none; }
@keyframes tcSheetIn { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.tc-game-picker-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  padding-top: max(14px, calc(env(safe-area-inset-top, 0px) + 8px));
  font-size: 16px; font-weight: 700; color: white;
}
.tc-game-search-wrap {
  display: flex; align-items: center; gap: var(--sp-2); margin: 0 16px 12px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-sm); padding: 0 12px;
}
.tc-game-search {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text-primary); font-size: 14px; padding: 10px 0;
}
.tc-game-search::placeholder { color: rgba(255,255,255,.25); }
.tc-game-list {
  flex: 1; overflow-y: auto; padding: 0 16px 16px;
  -webkit-overflow-scrolling: touch;
}
.tc-game-item {
  display: flex; align-items: center; gap: var(--sp-3); padding: 10px 12px;
  border-radius: var(--radius-sm); cursor: pointer; transition: background .1s;
  -webkit-tap-highlight-color: transparent;
}
.tc-game-item:hover { background: rgba(255,255,255,.04); }
.tc-game-item.selected { background: var(--accent-soft); }
.tc-game-icon {
  width: 36px; height: 36px; border-radius: var(--radius-sm); display: flex;
  align-items: center; justify-content: center; font-size: 18px;
  flex-shrink: 0;
}
.tc-game-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.tc-game-cat { font-size: 11px; color: var(--text-muted); }
.tc-game-check {
  margin-left: auto; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.15); display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; transition: all .12s;
}
.tc-game-item.selected .tc-game-check {
  background: var(--accent); border-color: var(--accent);
}

/* Music picker tabs */
.music-picker-tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--border);
  padding: 0 16px;
}
.music-tab {
  flex: 1; padding: 10px 0; text-align: center; background: none; border: none;
  border-bottom: 2px solid transparent; color: var(--text-muted);
  font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s;
}
.music-tab:hover { color: var(--text-secondary); }
.music-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ================================================================
   PREMIUM UPGRADE MODAL
   ================================================================ */
.cap-overlay {
  position: fixed; inset: 0; z-index: var(--z-top);
  background: rgba(0,0,0,.65); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; opacity: 0; transition: opacity .2s;
}
.cap-overlay.visible { opacity: 1; }
.cap-modal {
  background: #0c0c1c; border: 1px solid rgba(255,255,255,.05);
  border-radius: var(--radius); width: 100%; max-width: 360px;
  padding: 28px 24px; position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.cap-close {
  position: absolute; top: 12px; right: 12px; background: none;
  border: none; color: rgba(255,255,255,.3); cursor: pointer;
  padding: 4px; border-radius: var(--radius-xs); transition: color .1s;
}
.cap-close:hover { color: var(--text-primary); }
.cap-phase.hidden { display: none; }
.cap-phase { text-align: center; }

/* Tier label */
.cap-tier {
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  margin-bottom: 6px; text-transform: uppercase;
}
.cap-tier-price {
  font-weight: 500; opacity: .6; text-transform: none;
  letter-spacing: 0; margin-left: 4px;
}

/* Title and subtitle */
.cap-title {
  font-size: 22px; font-weight: 800; color: white;
  margin: 0 0 6px; letter-spacing: -0.03em; line-height: 1.15;
}
.cap-sub {
  font-size: 13px; color: rgba(255,255,255,.4); line-height: 1.5;
  margin: 0 0 18px;
}
.cap-sub strong { color: rgba(255,255,255,.7); }

/* Benefits */
.cap-benefits {
  display: flex; flex-direction: column; gap: var(--sp-2);
  margin-bottom: 18px; text-align: left;
}
.cap-benefit {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 13px; color: rgba(255,255,255,.65); font-weight: 500;
}
.cap-benefit svg { flex-shrink: 0; }

/* Divider */
.cap-divider {
  height: 1px; background: rgba(255,255,255,.05); margin: 0 0 18px;
}

/* Payment section */
.cap-pay-section {
  margin-bottom: 18px;
}
.cap-pay-label {
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,.35);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px;
}
.cap-pay-row {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-bottom: 4px;
}
.cap-pay-handle {
  font-size: 17px; font-weight: 700; color: rgba(255,255,255,.85);
  letter-spacing: -0.01em;
}
.cap-copy-btn {
  background: rgba(255,255,255,.05); border: none; border-radius: 5px;
  padding: 5px; cursor: pointer; color: rgba(255,255,255,.35);
  transition: all .1s; display: flex; align-items: center;
}
.cap-copy-btn:hover { background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); }
.cap-pay-amount {
  font-size: 12px; color: rgba(255,255,255,.3); font-weight: 500;
}

/* DXED coin payment */
.cap-coin-section { text-align: left; }
.cap-coin-dot { color: var(--accent); margin-right: 2px; }
.cap-coin-note {
  font-size: 12px; color: rgba(255,255,255,.5); line-height: 1.5; margin: 0 0 10px;
}
.cap-coin-note strong { color: rgba(255,255,255,.85); }
.cap-coin-ca-row {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-sm); padding: 8px 8px 8px 12px;
}
.cap-coin-ca {
  flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: rgba(255,255,255,.8); letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cap-coin-ca-row .cap-copy-btn { flex-shrink: 0; }
.cap-coin-ca-tag { flex-shrink: 0; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.35); border: 1px solid rgba(255,255,255,.12); border-radius: 4px; padding: 2px 5px; }
.cap-coin-btn { margin-bottom: 4px; }
.cap-coin-buy { display: inline-block; margin-top: 8px; }
.cap-wallet-status { font-size: 12px; line-height: 1.45; color: rgba(255,255,255,.55); margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-sm); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); text-align: left; }
.cap-wallet-status.is-ok { color: #6ee7a8; background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.22); }
.cap-wallet-status.is-error { color: #f6a5a5; background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.22); }
.cap-wallet-status a { color: inherit; font-weight: 700; text-decoration: underline; }
.cap-coin-link {
  display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 600;
  color: var(--accent); text-decoration: none;
}
.cap-coin-link:hover { text-decoration: underline; }
.cap-divider-or {
  display: flex; align-items: center; justify-content: center;
  margin: 14px 0; height: auto; background: none; position: relative;
}
.cap-divider-or::before, .cap-divider-or::after {
  content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.07);
}
.cap-divider-or span {
  font-size: 11px; color: rgba(255,255,255,.3); padding: 0 12px;
  text-transform: uppercase; letter-spacing: .08em;
}

/* Buttons */
.cap-primary-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  width: 100%; padding: 13px; border: none; border-radius: var(--radius-sm);
  color: white; font-size: 14px; font-weight: 700; cursor: pointer;
  text-decoration: none; transition: all .12s; letter-spacing: -0.01em;
}
.cap-primary-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.cap-primary-btn:active { transform: scale(.98); }
.cap-secondary-btn {
  width: 100%; padding: 11px; border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius-sm); background: transparent; color: rgba(255,255,255,.45);
  font-size: 13px; font-weight: 600; cursor: pointer; margin-top: 8px;
  transition: all .1s;
}
.cap-secondary-btn:hover { background: rgba(255,255,255,.03); color: rgba(255,255,255,.6); }

/* "100% goes to $DXED" note */
.cap-treasury-note {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 16px 0 0; padding: 9px 12px; border-radius: var(--radius-sm);
  background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.20);
  font-size: 12px; font-weight: 600; color: #6ee7a8; text-align: center;
}
.cap-treasury-note span { font-size: 14px; }

/* Fine print */
.cap-fine-print {
  font-size: 11px; color: rgba(255,255,255,.2); text-align: center;
  margin: 10px 0 0; line-height: 1.4;
}

/* Confirmation phase */
.cap-confirm-check { margin-bottom: 14px; }
.cap-status-pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--accent-hover); border: 1px solid var(--accent-muted);
  color: var(--accent-light); padding: 7px 14px; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600; margin-top: 16px;
}
.cap-status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-light); animation: capPulse 1.5s infinite;
}
@keyframes capPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ================================================================
   DXED PLATFORM PATCH NOTES — official update notes
   ================================================================ */
.pnx { max-width: 720px; margin: 0 auto; padding: 18px 20px 56px; }
.pnx-intro-sub { color: var(--text-secondary); font-size: 14.5px; line-height: 1.6; margin: 0 0 22px; }

.pnx-banner-1-1-0 {
  position: relative; isolation: isolate;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(150,154,168,0.30), transparent 55%),
    radial-gradient(120% 160% at 100% 0%, rgba(122,126,140,0.22), transparent 55%),
    linear-gradient(135deg, #20222b, #0e0f13 72%);
}
.pnx-banner-1-1-0::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 18px 18px; opacity: 0.6;
}
.pnx-wordmark { font-weight: 900; letter-spacing: 3px; color: #fff; }

.pnx-list { display: flex; flex-direction: column; gap: 18px; }
.pnx-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; cursor: pointer;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.pnx-card:hover { border-color: var(--border-accent); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.pnx-card-banner { height: 132px; padding: 18px 22px; display: flex; flex-direction: column; justify-content: space-between; }
.pnx-card-banner .pnx-wordmark { font-size: 26px; }
.pnx-card-ver {
  align-self: flex-start; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; color: #fff;
  background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius-full);
  padding: 4px 12px; backdrop-filter: blur(6px);
}
.pnx-card-body { padding: 18px 22px 22px; }
.pnx-card-meta { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; flex-wrap: wrap; }
.pnx-ver-badge {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 700;
  color: var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 3px 9px;
}
.pnx-status { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; border-radius: var(--radius-full); padding: 4px 11px; }
.pnx-status-upcoming { background: rgba(245,158,11,0.14); color: #f59e0b; border: 1px solid rgba(245,158,11,0.30); }
.pnx-status-live { background: rgba(34,197,94,0.14); color: #22c55e; border: 1px solid rgba(34,197,94,0.30); }
.pnx-status-rolling { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-mid); }
.pnx-date { font-size: 12.5px; color: var(--text-muted); margin-left: auto; font-weight: 600; }
.pnx-card-title { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); margin: 0 0 8px; }
.pnx-card-summary { font-size: 14px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pnx-view-btn {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700;
  color: #fff; background: var(--accent); border: none; border-radius: var(--radius-full); padding: 9px 18px; cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.pnx-view-btn:hover { background: var(--accent-2); transform: translateY(-1px); }

.pnx-back {
  display: inline-flex; align-items: center; gap: 7px; background: none; border: none; cursor: pointer;
  color: var(--text-secondary); font-size: 13.5px; font-weight: 700; padding: 4px 2px; margin-bottom: 16px;
  transition: color var(--transition-fast);
}
.pnx-back:hover { color: var(--text-primary); }
.pnx-hero { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px 28px 26px; margin-bottom: 22px; }
.pnx-wordmark-lg { font-size: 30px; display: block; margin-bottom: 16px; }
.pnx-hero-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.pnx-ver-badge-lg { font-size: 13px; color: #fff; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.20); font-family: inherit; padding: 5px 13px; }
.pnx-hero-title { font-size: 30px; font-weight: 900; letter-spacing: -0.03em; color: #fff; margin: 0 0 6px; line-height: 1.1; }
.pnx-hero-date { font-size: 14px; color: rgba(255,255,255,0.70); font-weight: 600; margin: 0; }
.pnx-summary { font-size: 15.5px; line-height: 1.7; color: var(--text-secondary); margin: 0 0 22px; }

.pnx-announce {
  background: linear-gradient(135deg, var(--accent-soft), rgba(122,126,140,0.04));
  border: 1px solid var(--border-accent); border-radius: var(--radius-lg); padding: 22px 24px; margin-bottom: 30px;
}
.pnx-announce-tag { display: inline-block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); background: var(--accent-soft); border-radius: var(--radius-full); padding: 4px 12px; margin-bottom: 12px; }
.pnx-announce-title { font-size: 18px; font-weight: 800; color: var(--text-primary); margin: 0 0 10px; letter-spacing: -0.01em; line-height: 1.3; }
.pnx-announce-body { font-size: 14.5px; line-height: 1.65; color: var(--text-secondary); margin: 0 0 10px; }
.pnx-announce-body:last-child { margin-bottom: 0; }

.pnx-sections { display: flex; flex-direction: column; gap: 14px; }
.pnx-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px 22px; transition: border-color var(--transition); }
.pnx-section:hover { border-color: var(--border-accent); }
.pnx-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pnx-section-num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 8px; padding: 5px 9px; min-width: 34px; text-align: center; }
.pnx-section-title { font-size: 16.5px; font-weight: 800; color: var(--text-primary); margin: 0; letter-spacing: -0.01em; }
.pnx-section-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pnx-section-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
.pnx-bullet { flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: 7px; }

.pnx-closing { text-align: center; margin-top: 30px; padding: 28px 24px; border: 1px dashed var(--border-accent); border-radius: var(--radius-lg); background: rgba(255,255,255,0.015); }
.pnx-closing-mark { display: block; font-weight: 900; letter-spacing: 3px; color: var(--accent); margin-bottom: 10px; font-size: 15px; }
.pnx-closing p { font-size: 14.5px; line-height: 1.7; color: var(--text-secondary); margin: 0 auto; max-width: 460px; }

@media (max-width: 560px) {
  .pnx { padding: 14px 14px 48px; }
  .pnx-hero { padding: 24px 20px 22px; }
  .pnx-hero-title { font-size: 24px; }
  .pnx-card-title { font-size: 18px; }
  .pnx-section { padding: 16px 16px; }
  .pnx-card-banner { height: 116px; padding: 16px 18px; }
  .pnx-card-body { padding: 16px 18px 18px; }
}

/* ================================================================
   PATCH NOTES — Editorial Feed
   ================================================================ */
.pn-feed { padding: 0 20px 32px; }
.pn-header { padding: 28px 20px 0; }
.pn-meta {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 12px; color: var(--text-muted); font-weight: 500;
  margin-bottom: 20px; letter-spacing: 0.01em;
}
.pn-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; }
.pn-refresh-btn {
  background: none; border: 1px solid var(--border); border-radius: var(--radius-xs);
  color: var(--text-muted); padding: 4px 10px; font-size: 11px; font-weight: 600;
  cursor: pointer; transition: all .2s; display: inline-flex; align-items: center; gap: var(--sp-1);
}
.pn-refresh-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Filters */
.pn-filters-row {
  display: flex; align-items: center; gap: 10px;
  padding: 0 20px 20px;
}
.pn-search {
  position: relative; flex: 0 0 220px;
}
.pn-search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none;
}
.pn-search input {
  width: 100%; padding: 8px 12px 8px 32px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary); font-size: 13px;
  font-weight: 500; outline: none; transition: border-color .2s;
}
.pn-search input::placeholder { color: var(--text-muted); }
.pn-search input:focus { border-color: var(--accent); }
.pn-filters {
  display: flex; gap: 6px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; flex: 1; min-width: 0;
}
.pn-filters::-webkit-scrollbar { display: none; }
.pn-filter {
  padding: 7px 16px; border-radius: var(--radius-sm); border: none;
  background: var(--bg-card); color: var(--text-secondary);
  font-size: 12px; font-weight: 600; cursor: pointer;
  white-space: nowrap; transition: all .15s; flex-shrink: 0;
  letter-spacing: 0.01em;
}
.pn-filter:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.pn-filter.active {
  background: var(--accent); color: #fff;
}

/* Card */
.pn-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; transition: border-color .2s, background .2s;
  margin-bottom: 12px;
}
.pn-card:hover { border-color: var(--accent-mid); background: var(--bg-card-hover); }
.pn-card-main {
  display: flex; gap: var(--sp-4); padding: 20px; cursor: pointer;
  align-items: flex-start;
}
.pn-card-thumb {
  width: 72px; height: 34px; border-radius: var(--radius-xs); flex-shrink: 0;
  object-fit: cover; background: var(--bg-secondary);
}
.pn-card-thumb-fallback {
  width: 72px; height: 34px; border-radius: var(--radius-xs); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-hover); font-weight: 800; font-size: 11px;
  color: var(--accent); letter-spacing: -0.03em;
}
.pn-card-body { flex: 1; min-width: 0; }
.pn-card-top {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: 6px;
}
.pn-card-game {
  font-size: 12px; font-weight: 700; color: var(--text-primary);
  letter-spacing: -0.01em;
}
.pn-card-tag {
  font-size: 10px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.pn-card-version {
  font-size: 10px; font-weight: 600; color: var(--accent);
  background: var(--accent-soft); padding: 1px 6px; border-radius: var(--radius-xs);
}
.pn-card-title {
  font-size: 15px; font-weight: 700; line-height: 1.35;
  color: var(--text-primary); margin-bottom: 6px;
  letter-spacing: -0.02em;
}
.pn-card-summary {
  font-size: 13px; color: var(--text-secondary); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pn-card-footer {
  display: flex; align-items: center; gap: 6px;
  margin-top: 10px; font-size: 11px; color: var(--text-muted);
  font-weight: 500;
}
.pn-card-footer-dot { width: 2px; height: 2px; border-radius: 50%; background: var(--text-muted); }
.pn-card-expand {
  color: var(--text-muted); transition: transform .25s ease;
  flex-shrink: 0; margin-top: 6px; font-size: 10px;
}
.pn-card-expand.open { transform: rotate(90deg); }

/* ── News vs Patch Notes: distinct visual identities ── */
/* News: editorial, image-forward, bold category pill */
.pn-card-news .pn-card-main { align-items: center; }
.pn-card-news .pn-card-thumb,
.pn-card-news .pn-card-thumb-fallback {
  width: 116px; height: 66px; border-radius: var(--radius-sm); font-size: 13px;
}
.pn-card-news .pn-card-title { font-size: 16px; }
.pn-card-news .pn-card-version {
  text-transform: uppercase; letter-spacing: 0.05em; font-size: 9px; font-weight: 800;
  color: #fff; background: var(--accent); border-radius: var(--radius-full); padding: 2px 8px;
}
/* Patch Notes: changelog / developer feel, left marker + mono version tag */
.pn-card-patch { border-left: 3px solid var(--accent-muted); }
.pn-card-patch:hover { border-left-color: var(--accent); }
.pn-card-patch .pn-card-version {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  border: 1px solid var(--border-accent); background: transparent; color: var(--accent);
}

/* Expanded detail */
.pn-card-detail {
  display: none; padding: 0 20px 20px;
  border-top: 1px solid var(--border);
}
.pn-card-detail.open { display: block; }
.pn-detail-list {
  margin: 16px 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.pn-detail-section {
  font-size: 12px; font-weight: 700; color: var(--accent);
  margin-top: 12px; margin-bottom: 2px; letter-spacing: 0.02em;
  text-transform: uppercase;
}
.pn-detail-item {
  font-size: 13px; color: var(--text-secondary); line-height: 1.55;
  display: flex; gap: 10px; align-items: flex-start;
}
.pn-detail-bullet {
  color: rgba(122,126,140,0.5); font-weight: 700; flex-shrink: 0;
  font-size: 8px; margin-top: 5px;
}
.pn-detail-link {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  margin-top: 16px; font-size: 12px; color: var(--accent);
  font-weight: 600; text-decoration: none; transition: opacity .15s;
}
.pn-detail-link:hover { opacity: 0.8; }

/* Responsive */
@media (max-width: 768px) {
  .pn-header { padding: 20px 16px 0; }
  .pn-filters-row { padding: 0 16px 16px; flex-wrap: wrap; }
  .pn-search { flex: 1 1 100%; }
  .pn-filters { flex: 1 1 100%; }
  .pn-feed { padding: 0 16px 24px; }
  .pn-card-main { padding: 16px; gap: var(--sp-3); }
  .pn-card-title { font-size: 14px; }
  .pn-card-detail { padding: 0 16px 16px; }
}
@media (max-width: 480px) {
  .pn-card-thumb, .pn-card-thumb-fallback { width: 56px; height: 26px; }
  .pn-card-main { gap: 10px; }
}

/* ================================================================
   TAKES — Maintenance
   ================================================================ */
.takes-maintenance {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 80px 24px; text-align: center; min-height: 50vh;
}
.takes-maintenance-icon { margin-bottom: 20px; opacity: .6; }
.takes-maintenance-title {
  font-size: 20px; font-weight: 800; color: var(--text-primary);
  margin: 0 0 8px; letter-spacing: -0.02em;
}
.takes-maintenance-sub {
  font-size: 14px; color: var(--text-muted); margin: 0;
  max-width: 320px; line-height: 1.5;
}

/* ================================================================
   TAKES — Hero / Header
   ================================================================ */
.takes-section .section-header { display: flex; }
.takes-hero { margin-bottom: 16px; padding: 0 2px; }
.takes-hero-inner {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 14px; gap: var(--sp-3);
}
.takes-hero-title {
  font-size: 24px; font-weight: 800; letter-spacing: -0.04em;
  color: var(--text-primary); margin: 0; line-height: 1.1;
}
.takes-hero-sub {
  font-size: 12px; color: var(--text-muted); margin: 4px 0 0;
  letter-spacing: 0; font-weight: 400; opacity: .7;
}
.takes-create-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--accent); color: white; border: none; border-radius: var(--radius-lg);
  padding: 7px 14px 7px 11px; font-size: 12px; font-weight: 700; cursor: pointer;
  transition: all .15s; white-space: nowrap; letter-spacing: 0.01em;
  box-shadow: 0 2px 8px var(--accent-mid);
}
.takes-create-btn svg { width: 14px; height: 14px; }
.takes-create-btn:hover { background: var(--accent-2); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(122,126,140,.35); }
.takes-create-btn:active { transform: scale(0.96); box-shadow: none; }
.takes-filter-row {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  -ms-overflow-style: none;
}
.takes-filter-row::-webkit-scrollbar { display: none; }
.takes-filter-chip {
  padding: 6px 14px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600;
  border: none; background: rgba(255,255,255,.04); color: rgba(255,255,255,.45);
  cursor: pointer; white-space: nowrap; transition: all .2s;
  letter-spacing: 0.01em;
}
.takes-filter-chip:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.65); }
.takes-filter-chip.active {
  background: var(--accent-soft); color: #c4b5fd; font-weight: 700;
}

/* ================================================================
   TAKES — Grid / Browse
   ================================================================ */
.takes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.takes-grid-item {
  cursor: pointer; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--bg-secondary); position: relative;
  transition: transform .15s ease, box-shadow .15s ease;
}
.takes-grid-item:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.takes-grid-item:active { transform: scale(0.97); }
.takes-grid-thumb {
  position: relative; width: 100%; aspect-ratio: 9/16;
  background: #08080f; overflow: hidden;
}
.takes-grid-thumb video,
.takes-grid-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.takes-grid-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 32px 8px 8px;
  background: linear-gradient(0deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.25) 60%, transparent 100%);
  display: flex; flex-direction: column; gap: 6px;
}
.takes-grid-stats {
  display: flex; align-items: center; gap: var(--sp-2);
}
.takes-grid-stat {
  display: flex; align-items: center; gap: 3px;
  font-size: 11px; color: rgba(255,255,255,.85); font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.takes-grid-stat svg { opacity: .8; }
.takes-grid-creator {
  display: flex; align-items: center; gap: 5px;
}
.takes-grid-creator-avatar {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 7px; font-weight: 700; color: white;
  border: 1px solid rgba(255,255,255,.2);
}
.takes-grid-creator-name {
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,.9);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.takes-grid-duration {
  position: absolute; bottom: 6px; right: 6px;
  background: rgba(0,0,0,.75); padding: 1px 5px; border-radius: 3px;
  font-size: 10px; font-weight: 700; color: rgba(255,255,255,.9);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.takes-grid-tag {
  position: absolute; top: 6px; left: 6px;
  background: rgba(122,126,140,.8); padding: 2px 6px; border-radius: var(--radius-xs);
  font-size: 9px; font-weight: 700; color: white;
  letter-spacing: 0.03em; text-transform: uppercase;
}
.takes-grid-caption {
  position: absolute; bottom: 30px; left: 8px; right: 8px;
  font-size: 12px; font-weight: 600; color: white;
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.35; letter-spacing: -0.01em;
}

/* ================================================================
   TAKES — Fullscreen Viewer
   ================================================================ */
.takes-viewer-overlay { position: fixed; inset: 0; z-index: var(--z-top); background: #030308; display: flex; flex-direction: column; }
.takes-viewer-scroll { width: 100%; max-width: 480px; flex: 1; overflow-y: scroll; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; margin: 0 auto; }
/* CSS variable for slide height — set by JS based on scroll container */

/* Desktop: keep sidebar visible, center video in remaining space */
@media (min-width: 769px) {
  .takes-viewer-overlay {
    left: var(--sidebar-w, 240px);
  }
  .takes-viewer-scroll {
    max-width: 400px;
  }
  .tv-slide { border-radius: var(--radius); overflow: hidden; }
  .tv-video { object-fit: contain; background: #000; border-radius: var(--radius); }
  /* Actions stay inside the slide, positioned right */
  .tv-actions { right: 10px; bottom: 80px; gap: 6px; }
  .tv-action-btn { width: 46px; height: 46px; background: rgba(255,255,255,.05); }
  .tv-action-btn svg { width: 22px; height: 22px; }
  .tv-action-count { font-size: 11px; color: rgba(255,255,255,.7); }
  .tv-bottom { left: 16px; right: 68px; bottom: 24px; }
  .tv-avatar { width: 40px; height: 40px; }
  .tv-creator-name { font-size: 15px; }
  .tv-caption { font-size: 14px; -webkit-line-clamp: 3; }
}

/* Medium desktop (collapsed sidebar) */
@media (min-width: 769px) and (max-width: 1100px) {
  .takes-viewer-overlay { left: 72px; }
}

/* Header — inside the overlay, not viewport-fixed */
.tv-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  padding-top: max(8px, env(safe-area-inset-top, 0px));
  flex-shrink: 0; z-index: var(--z-top);
  background: #030308;
}
.tv-header-left {
  display: flex; align-items: center; gap: var(--sp-2); pointer-events: auto;
}
.tv-back-btn {
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.07); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .1s; -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.tv-back-btn:hover { background: rgba(255,255,255,.14); }
.tv-header-title {
  font-size: 17px; font-weight: 800; color: white; letter-spacing: -0.02em;
}
.tv-header-right {
  pointer-events: auto; display: flex; gap: 6px;
}
.tv-header-action {
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.07); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .1s; -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.tv-header-action:hover { background: rgba(255,255,255,.14); }

/* Filter chips — inside overlay flow */
.tv-chips {
  display: flex; gap: 6px; padding: 2px 12px 8px;
  overflow-x: auto; scrollbar-width: none;
  flex-shrink: 0; z-index: var(--z-top);
  background: #030308;
}
.tv-chips::-webkit-scrollbar { display: none; }
.tv-chip {
  padding: 5px 14px; border-radius: var(--radius-lg); font-size: 12px; font-weight: 600;
  border: none; background: rgba(255,255,255,.07); color: rgba(255,255,255,.5);
  cursor: pointer; white-space: nowrap; transition: all .15s;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  -webkit-tap-highlight-color: transparent;
}
.tv-chip:hover { background: rgba(255,255,255,.12); color: rgba(255,255,255,.7); }
.tv-chip.active { background: var(--accent-glow); color: #c4b5fd; font-weight: 700; }

/* Slide */
.tv-slide { width: 100%; height: 100vh; height: 100dvh; position: relative; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; }
.tv-video { width: 100%; height: 100%; object-fit: cover; }
.tv-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 4; }

/* Gradients — always visible, subtle */
.tv-gradient-top {
  position: absolute; top: 0; left: 0; right: 0; height: 160px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(3,3,8,.65) 0%, rgba(3,3,8,.2) 50%, transparent 100%);
}
.tv-gradient-bottom {
  position: absolute; bottom: 0; left: 0; right: 0; height: 320px; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(3,3,8,.8) 0%, rgba(3,3,8,.4) 30%, transparent 100%);
}

/* Play/pause state icon */
.tv-state-icon {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.6);
  z-index: 5; pointer-events: none; opacity: 0;
  transition: opacity .1s, transform .2s cubic-bezier(.34,1.56,.64,1);
  background: rgba(0,0,0,.45); border-radius: 50%; width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.tv-state-icon.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.tv-state-icon .tv-state-play, .tv-state-icon .tv-state-pause { display: none; }
.tv-state-icon.playing .tv-state-play { display: flex; }
.tv-state-icon.paused .tv-state-pause { display: flex; }
.tv-state-icon svg { width: 28px; height: 28px; }

/* ── Progress bar ── */
.tv-controls {
  position: absolute; bottom: env(safe-area-inset-bottom, 0px); left: 0; right: 0; z-index: 5;
  pointer-events: auto;
}
.tv-progress-bar {
  position: relative; height: 3px; background: rgba(255,255,255,.08); cursor: pointer;
  transition: height .1s;
}
.tv-progress-bar:hover { height: 5px; }
.tv-progress-buffer {
  position: absolute; top: 0; left: 0; height: 100%; width: 0;
  background: rgba(255,255,255,.08);
}
.tv-progress-fill {
  position: absolute; top: 0; left: 0; height: 100%; width: 0%;
  background: var(--accent-light);
  box-shadow: 0 0 6px rgba(167,139,250,.3);
}
.tv-progress-thumb {
  position: absolute; top: 50%; left: 0; width: 10px; height: 10px;
  background: #c4b5fd; border-radius: 50%; z-index: 1;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .1s;
  box-shadow: 0 0 8px rgba(167,139,250,.4);
}
.tv-progress-bar:hover .tv-progress-thumb { transform: translate(-50%, -50%) scale(1); }
.tv-time-display {
  font-size: 10px; color: rgba(255,255,255,.4); padding: 3px 12px 0;
  font-variant-numeric: tabular-nums; pointer-events: none;
  opacity: 0; transition: opacity .2s; font-weight: 500;
}
.tv-slide.tv-controls-visible .tv-time-display { opacity: 1; }

/* Auto-hide top gradient with controls */
.tv-slide .tv-gradient-top { transition: opacity .3s; }

/* ── Bottom metadata ── */
.tv-bottom {
  position: absolute; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); left: 14px; right: 54px;
  pointer-events: auto;
}
.tv-creator-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tv-creator-row:active { opacity: .7; }
.tv-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; color: white; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.2);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.tv-creator-info { flex: 1; min-width: 0; }
.tv-creator-name-row {
  display: flex; align-items: center; gap: var(--sp-1);
}
.tv-creator-name {
  color: white; font-weight: 700; font-size: 15px; line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0,0,0,.6); letter-spacing: -0.01em;
}
.tv-creator-name-row .vb { filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.tv-creator-timestamp {
  font-size: 11px; color: rgba(255,255,255,.35); margin-left: 2px;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.tv-creator-meta {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: rgba(255,255,255,.45); line-height: 1.3;
  text-shadow: 0 1px 2px rgba(0,0,0,.4); margin-top: 1px;
}
.tv-creator-meta .tv-game-inline {
  color: #c4b5fd; font-weight: 600;
}
.tv-caption {
  color: rgba(255,255,255,.8); font-size: 13px; line-height: 1.45;
  text-shadow: 0 1px 2px rgba(0,0,0,.5); margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-weight: 400;
}
.tv-tag-row {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 5px;
}
.tv-tag-pill {
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,.45);
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.tv-music-row {
  display: flex; align-items: center; gap: 5px; margin-top: 5px;
  color: rgba(255,255,255,.35); font-size: 11px;
}
.tv-music-row .tv-music-icon { animation: musicSpin 3s linear infinite; }
.tv-music-row .tv-music-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }

/* ── Right action rail ── */
.tv-actions {
  position: absolute; right: 6px; bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: var(--sp-1); align-items: center;
  pointer-events: auto;
}
.tv-action-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tv-action-btn {
  background: rgba(255,255,255,.05); border: none; border-radius: 50%;
  width: 40px; height: 40px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .1s; padding: 0;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.tv-action-btn svg {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
  width: 20px; height: 20px;
}
.tv-action-btn:active { transform: scale(0.85); }
.tv-action-btn.liked { background: rgba(239,68,68,.12); }
.tv-action-btn.liked svg { filter: drop-shadow(0 0 4px rgba(239,68,68,.3)); }
.tv-action-count {
  font-size: 10px; color: rgba(255,255,255,.55); font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
  text-align: center; line-height: 1; min-height: 10px;
}

/* More options menu */
.tv-more-menu {
  position: absolute; right: 0; bottom: 0;
  transform: translateX(calc(-100% - 48px)) translateY(-10px);
  background: rgba(8,8,20,.95); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.06); border-radius: var(--radius);
  padding: 4px; min-width: 156px; z-index: 10;
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
  animation: tvMenuIn .12s ease;
}
@keyframes tvMenuIn { from { opacity: 0; transform: translateX(calc(-100% - 48px)) translateY(-10px) scale(.92); } to { opacity: 1; transform: translateX(calc(-100% - 48px)) translateY(-10px) scale(1); } }
.tv-more-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; padding: 10px 12px; border-radius: var(--radius-sm);
  color: rgba(255,255,255,.8); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: background .08s; text-align: left;
}
.tv-more-item:hover { background: rgba(255,255,255,.05); }
.tv-more-item.danger { color: #ef4444; }
.tv-more-item.danger:hover { background: rgba(239,68,68,.08); }
.tv-more-item svg { flex-shrink: 0; opacity: .6; }

/* Comments sheet */
.tv-comments-sheet { position: fixed; bottom: 0; left: 0; right: 0; max-height: 55vh; background: #0a0a1a; border-radius: var(--radius) 14px 0 0; z-index: 10002; display: flex; flex-direction: column; animation: slideUpSheet .2s ease; border-top: 1px solid rgba(255,255,255,.05); }
@keyframes slideUpSheet { from { transform: translateY(100%); } to { transform: translateY(0); } }
.tv-comments-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.04); font-weight: 700; font-size: 14px; color: var(--text-primary); }
.tv-comments-list { flex: 1; overflow-y: auto; padding: 8px 16px; max-height: 38vh; }
.tv-comment-item { display: flex; gap: 10px; padding: 10px 0; }
.tv-comment-avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: white; }
.tv-comment-name { font-weight: 700; font-size: 13px; color: var(--text-primary); margin-right: 6px; }
.tv-comment-time { font-size: 11px; color: var(--text-muted); }
.tv-comment-text { font-size: 13px; color: var(--text-secondary); line-height: 1.4; margin-top: 2px; }
.tv-comments-input-row { display: flex; gap: var(--sp-2); padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(255,255,255,.04); }
.tv-comment-input { flex: 1; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.05); border-radius: var(--radius-lg); padding: 8px 14px; color: var(--text-primary); font-size: 13px; outline: none; }
.tv-comment-input:focus { border-color: rgba(122,126,140,.35); }
.tv-comment-input::placeholder { color: var(--text-muted); }

/* Mobile adjustments */
@media (max-width: 768px) {
  .takes-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .takes-hero-title { font-size: 20px; }
  .takes-create-btn { padding: 6px 12px 6px 9px; font-size: 11px; }
  .tv-actions { right: 4px; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); gap: 2px; }
  .tv-action-btn { width: 38px; height: 38px; }
  .tv-action-btn svg { width: 18px; height: 18px; }
  .tv-bottom { right: 50px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); left: 12px; }
  .tv-avatar { width: 32px; height: 32px; font-size: 11px; }
  .tv-creator-name { font-size: 13px; }
  .tv-creator-meta { font-size: 10px; }
  .tv-caption { font-size: 12px; }
  .tv-controls { bottom: env(safe-area-inset-bottom, 0px); }
  .tv-state-icon { width: 52px; height: 52px; }
  .tv-state-icon svg { width: 26px; height: 26px; }
  .music-picker-box { max-width: 100%; margin: 0; border-radius: var(--radius-md) 16px 0 0; }
}
}
/* ================================================================
   TOURNAMENTS
   ================================================================ */
.trn-hero { border-radius: var(--radius-lg); overflow: hidden; margin: 0 0 18px; background: linear-gradient(135deg, #232544, #0e0f17); border: 1px solid var(--border); position: relative; }
.trn-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 120% at 100% 0%, rgba(122,126,140,0.25), transparent 60%); pointer-events: none; }
.trn-hero-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 26px 24px; position: relative; z-index: 1; }
.trn-hero-kicker { font-size: 11px; font-weight: 800; letter-spacing: 2px; color: var(--accent); opacity: .9; }
.trn-hero-title { font-size: 28px; font-weight: 900; color: #fff; margin: 4px 0; }
.trn-hero-sub { font-size: 13px; color: rgba(255,255,255,0.7); max-width: 460px; }
.trn-hero-trust { margin-top: 14px; font-size: 11.5px; line-height: 1.5; color: rgba(255,255,255,0.55); max-width: 720px; }
.trn-create-btn { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.trn-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.trn-search { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 8px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 9px 14px; color: var(--text-muted); }
.trn-search input { flex: 1; background: none; border: none; outline: none; color: var(--text-primary); font-size: 14px; }
.trn-select { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); padding: 9px 12px; font-size: 13px; cursor: pointer; }
.trn-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.trn-tab { background: none; border: 1px solid var(--border); color: var(--text-secondary); border-radius: var(--radius-full); padding: 7px 16px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all var(--transition-fast); }
.trn-tab:hover { border-color: var(--accent-soft); color: var(--text-primary); }
.trn-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.trn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.trn-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); }
.trn-card:hover { transform: translateY(-3px); border-color: var(--accent-soft); box-shadow: var(--shadow-lift); }
.trn-card-banner { height: 110px; position: relative; display: flex; align-items: flex-start; justify-content: space-between; padding: 12px; }
.trn-card-game { background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-full); }
.trn-card-body { padding: 14px 16px; }
.trn-card-title { font-size: 16px; font-weight: 800; color: var(--text-primary); margin-bottom: 4px; }
.trn-card-meta { font-size: 12px; color: var(--text-muted); display: flex; gap: 6px; margin-bottom: 12px; }
.trn-card-stats { display: flex; justify-content: space-between; gap: 10px; }
.trn-stat { display: flex; flex-direction: column; }
.trn-stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }
.trn-stat-val { font-size: 15px; font-weight: 800; color: var(--text-primary); }
.trn-prize { color: #4ade80; }

.trn-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: var(--radius-full); }
.trn-status-open { background: rgba(74,222,128,0.16); color: #4ade80; }
.trn-status-soon { background: rgba(251,191,36,0.16); color: #fbbf24; }
.trn-status-full { background: rgba(96,165,250,0.16); color: #60a5fa; }
.trn-status-live { background: rgba(239,68,68,0.18); color: #f87171; }
.trn-status-done { background: rgba(148,163,184,0.16); color: #94a3b8; }
.trn-status-cancelled { background: rgba(148,163,184,0.16); color: #94a3b8; }
.trn-live-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: trnPulse 1.3s infinite; }
@keyframes trnPulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

.trn-back { background: none; border: none; color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 4px 0; margin-bottom: 12px; }
.trn-back:hover { color: var(--text-primary); }
.trn-detail-banner { border-radius: var(--radius-lg); padding: 0; position: relative; min-height: 180px; display: flex; align-items: flex-end; }
.trn-detail-head { display: flex; align-items: flex-end; gap: 16px; padding: 20px; width: 100%; }
.trn-detail-logo { width: 76px; height: 76px; border-radius: var(--radius-md); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 900; color: #fff; border: 2px solid rgba(255,255,255,0.15); }
.trn-detail-game { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.75); }
.trn-detail-title { font-size: 24px; font-weight: 900; color: #fff; margin: 2px 0; }
.trn-detail-host { font-size: 13px; color: rgba(255,255,255,0.7); }
.trn-detail-host strong { color: #fff; }
.trn-detail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin: 16px 0; }
.trn-bigstat { background: var(--bg-card); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.trn-bigstat-label { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); }
.trn-bigstat-val { font-size: 18px; font-weight: 800; color: var(--text-primary); }
.trn-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; align-items: center; }
.trn-join-btn { font-size: 15px; padding: 11px 22px; }
.trn-joined-badge { color: #4ade80; font-weight: 700; font-size: 14px; }
.trn-danger { color: #f87171; }
.trn-section-title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); margin: 18px 0 10px; }
.trn-champion { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, rgba(251,191,36,0.12), rgba(122,126,140,0.08)); border: 1px solid rgba(251,191,36,0.3); border-radius: var(--radius-md); padding: 16px 20px; margin: 16px 0; }
.trn-champion-crown { font-size: 32px; }
.trn-champion-label { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: #fbbf24; font-weight: 800; }
.trn-champion-name { font-size: 20px; font-weight: 900; color: var(--text-primary); }
.trn-champion-prize { margin-left: auto; font-size: 22px; font-weight: 900; color: #4ade80; }
.trn-cols { display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px; }
.trn-players { display: flex; flex-direction: column; gap: 6px; }
.trn-player { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition-fast); }
.trn-player:hover { background: var(--bg-hover); }
.trn-player-av { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; color: #fff; }
.trn-prose { font-size: 14px; line-height: 1.6; color: var(--text-secondary); white-space: pre-wrap; }

/* Bracket */
.trn-bracket-wrap { overflow-x: auto; padding-bottom: 8px; }
.trn-bracket { display: flex; gap: 28px; min-width: min-content; }
.trn-round { display: flex; flex-direction: column; justify-content: space-around; gap: 16px; min-width: 200px; }
.trn-round-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); text-align: center; }
.trn-match { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.trn-match-conflict { border-color: rgba(251,191,36,0.5); }
.trn-match-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; font-size: 13px; color: var(--text-secondary); border-bottom: 1px solid var(--border); }
.trn-match-row:last-of-type { border-bottom: none; }
.trn-match-row.win { color: var(--text-primary); font-weight: 800; background: rgba(74,222,128,0.08); }
.trn-match-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trn-match-score { font-weight: 800; color: var(--text-primary); }
.trn-tbd { color: var(--text-muted); font-style: italic; }
.trn-match-flag { font-size: 11px; color: #fbbf24; padding: 4px 12px; background: rgba(251,191,36,0.1); }
.trn-match-btn { width: 100%; border: none; background: var(--accent); color: #fff; padding: 7px; font-size: 12px; font-weight: 700; cursor: pointer; }
.trn-match-btn:hover { filter: brightness(1.08); }
.trn-resolve { background: #fbbf24; color: #1a1a1a; }

/* Overlays / modals */
.trn-overlay { position: fixed; inset: 0; z-index: var(--z-modal); display: none; align-items: center; justify-content: center; padding: 20px; }
/* Fade the whole overlay + scale-in the modal so dialogs don't hard-pop. */
.trn-overlay[style*="flex"] { animation: trnFade 0.16s var(--ease); }
@keyframes trnFade { from { opacity: 0; } to { opacity: 1; } }
.trn-overlay-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); }
.trn-modal { position: relative; z-index: 1; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); animation: modalIn 0.2s var(--ease); }
.trn-modal-sm { max-width: 420px; }
.trn-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.trn-modal-head h3 { font-size: 17px; font-weight: 800; }
.trn-modal-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.trn-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--border); }
.trn-field { display: flex; flex-direction: column; gap: 6px; }
.trn-field > span { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.trn-field input, .trn-field select, .trn-field textarea { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; color: var(--text-primary); font-size: 14px; font-family: inherit; outline: none; }
.trn-field input:focus, .trn-field select:focus, .trn-field textarea:focus { border-color: var(--border-accent); }
.trn-field-row { display: flex; gap: 12px; }
.trn-field-row .trn-field { flex: 1; }

/* Community image upload (avatar / banner) */
.comm-img-row { align-items: stretch; }
.comm-img-field { cursor: default; }
.comm-img-field.comm-img-avatar { flex: 0 0 116px; }
.comm-img-field.comm-img-banner { flex: 1; }
.comm-img-upload { position: relative; border: 1px dashed var(--border); border-radius: var(--radius-md); background: var(--bg-input); overflow: hidden; cursor: pointer; transition: border-color .15s, background .15s; }
.comm-img-upload:hover { border-color: var(--border-accent); background: var(--bg-card-hover); }
.comm-img-upload.avatar { width: 100%; aspect-ratio: 1 / 1; }
.comm-img-upload.banner { width: 100%; height: 116px; }
.comm-img-upload.uploading { pointer-events: none; opacity: .8; }
.comm-img-preview { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background-size: cover; background-position: center; color: var(--text-muted); }
.comm-img-preview span { font-size: 11px; font-weight: 700; letter-spacing: .01em; }
.comm-img-remove { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.comm-img-remove:hover { background: rgba(0,0,0,.8); }
.comm-media-preview.comm-media-loading { display: flex; align-items: center; justify-content: center; min-height: 120px; background: var(--bg-input); border-radius: var(--radius-md); }
@media (max-width: 560px) {
  .comm-img-row { flex-direction: row; }
  .comm-img-field.comm-img-avatar { flex: 0 0 96px; }
}
.trn-checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.trn-quote { background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.trn-quote-free { font-size: 13px; color: var(--text-muted); }
.trn-quote-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-secondary); }
.trn-quote-row strong { color: var(--text-primary); }
.trn-quote-accent strong { color: #4ade80; }
.trn-pay-amount { font-size: 34px; font-weight: 900; text-align: center; color: var(--text-primary); }
.trn-pay-amount span { font-size: 16px; color: var(--text-muted); }
.trn-pay-break { background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.trn-pay-note { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

/* Profile tournament block */
.trn-profile { margin: 16px 0; }
.trn-profile-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.trn-pstat { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; text-align: center; }
.trn-pstat-val { display: block; font-size: 20px; font-weight: 900; color: var(--text-primary); }
.trn-pstat-label { font-size: 11px; color: var(--text-muted); }
.trn-history { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.trn-history-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; }
.trn-history-row:hover { border-color: var(--accent-soft); }
.trn-history-name { flex: 1; font-weight: 700; color: var(--text-primary); }
.trn-history-game { color: var(--text-muted); font-size: 12px; }
.trn-history-state { color: var(--text-muted); font-size: 12px; text-transform: capitalize; }

@media (max-width: 720px) {
  .trn-hero-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .trn-hero-title { font-size: 23px; }
  .trn-cols { grid-template-columns: 1fr; gap: 14px; }
  .trn-profile-stats { grid-template-columns: repeat(2,1fr); }
  .trn-detail-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .trn-field-row { flex-direction: column; gap: 14px; }
}

/* Wallet connection */
.trn-hero-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.trn-wallet-btn { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: #fff; border-radius: var(--radius-full); padding: 9px 16px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background var(--transition-fast); }
.trn-wallet-btn:hover { background: rgba(255,255,255,0.16); }
.wallet-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; display: inline-block; box-shadow: 0 0 0 3px rgba(74,222,128,0.2); }
.wallet-list { display: flex; flex-direction: column; gap: 8px; }
.wallet-row { display: flex; align-items: center; gap: 12px; width: 100%; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast); }
.wallet-row:hover { border-color: var(--accent-soft); background: var(--bg-hover); }
.wallet-row-icon { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-weight: 900; color: #1a1a1a; font-size: 15px; }
.wallet-row-name { flex: 1; text-align: left; font-weight: 700; color: var(--text-primary); font-size: 14px; }
.wallet-row-tag { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.wallet-connected { display: flex; align-items: center; gap: 8px; background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.3); border-radius: var(--radius-md); padding: 11px 14px; font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; }
.trn-pay-wallet { display: flex; align-items: center; gap: 10px; }
.trn-pay-wallet .wallet-connected { flex: 1; margin-bottom: 0; }
.wallet-switch { background: none; border: 1px solid var(--border); color: var(--text-secondary); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 12px; font-weight: 700; cursor: pointer; }
.wallet-switch:hover { border-color: var(--accent-soft); color: var(--text-primary); }

/* Tournament discovery — richer cards */
.trn-card { position: relative; }
.trn-card::before { content: ''; position: absolute; inset: 0; border-radius: var(--radius-lg); padding: 1px; background: linear-gradient(160deg, var(--gc, var(--accent)), transparent 55%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity var(--transition-fast); pointer-events: none; }
.trn-card:hover::before { opacity: .7; }
.trn-card:hover { box-shadow: 0 12px 30px -12px var(--gc, rgba(122,126,140,0.5)); }
.trn-card-banner { height: 116px; padding: 12px; flex-wrap: wrap; align-content: flex-start; gap: 8px; }
.trn-card-entry { background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); color: #fff; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: var(--radius-full); margin-left: auto; }
.trn-card-entry.trn-free { background: rgba(74,222,128,0.22); color: #4ade80; }
.trn-card-game { display: inline-flex; align-items: center; gap: 6px; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px 4px 4px; border-radius: var(--radius-full); align-self: flex-end; margin-top: auto; }
.trn-card-game-icon { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 900; color: #fff; }
.trn-card-meta { gap: 6px; }
.trn-chip { background: var(--bg-tertiary); border: 1px solid var(--border); color: var(--text-secondary); font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: var(--radius-full); }
.trn-card-prize-row { display: flex; align-items: flex-end; justify-content: space-between; margin: 12px 0 10px; }
.trn-card-prize { font-size: 22px; font-weight: 900; color: #4ade80; line-height: 1.1; }
.trn-av-stack { display: flex; align-items: center; }
.trn-av-stack-item { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--bg-card); margin-left: -8px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #fff; }
.trn-av-stack-item:first-child { margin-left: 0; }
.trn-av-more { font-size: 11px; color: var(--text-muted); margin-left: 6px; font-weight: 700; }
.trn-fill { height: 5px; background: var(--bg-tertiary); border-radius: 3px; overflow: hidden; }
.trn-fill-bar { height: 100%; border-radius: 3px; transition: width var(--transition); }
.trn-fill-label { font-size: 11px; color: var(--text-muted); margin-top: 6px; }

/* Featured banner */
.trn-featured { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 200px; display: flex; align-items: flex-end; cursor: pointer; margin-bottom: 18px; border: 1px solid var(--border); transition: box-shadow var(--transition-fast); }
.trn-featured:hover { box-shadow: 0 16px 40px -16px var(--gc, rgba(122,126,140,0.6)); }
.trn-featured-tag { position: absolute; top: 14px; left: 14px; background: var(--gc, var(--accent)); color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .5px; padding: 5px 12px; border-radius: var(--radius-full); text-transform: uppercase; }
.trn-featured-body { padding: 22px; width: 100%; }
.trn-featured-title { font-size: 26px; font-weight: 900; color: #fff; margin: 8px 0 14px; }
.trn-featured-stats { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.trn-featured-stats .trn-stat-label { color: rgba(255,255,255,0.6); }
.trn-featured-prize { display: block; font-size: 24px; font-weight: 900; color: #4ade80; }
.trn-featured-val { display: block; font-size: 18px; font-weight: 800; color: #fff; }
.trn-featured-stats .trn-status { margin-left: auto; }

/* Empty state */
.trn-empty { text-align: center; padding: 60px 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.trn-empty-icon { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg-card); border: 1px solid var(--border); color: var(--accent); margin-bottom: 8px; }
.trn-empty-icon svg { width: 34px; height: 34px; }
.trn-empty h3 { font-size: 18px; font-weight: 800; color: var(--text-primary); }
.trn-empty p { font-size: 14px; color: var(--text-muted); margin-bottom: 14px; max-width: 320px; }

@media (max-width: 720px) {
  .trn-featured-title { font-size: 21px; }
  .trn-featured-stats { gap: 18px; }
}

/* Tournament registration wallet field + roster management */
.trn-req { font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--accent); background: var(--accent-subtle); padding: 1px 6px; border-radius: var(--radius-full); margin-left: 4px; }
.trn-field-err { font-size: 12px; color: #f87171; min-height: 0; }
.trn-input-bad { border-color: rgba(248,113,113,0.6) !important; }
.wallet-prefill { background: none; border: none; color: var(--accent); font-size: 12px; font-weight: 700; cursor: pointer; text-align: left; padding: 2px 0; }
.wallet-prefill:hover { text-decoration: underline; }
.trn-wallet-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--text-secondary); word-break: break-all; }
.trn-mywallet { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 12px; }
.trn-manage-bar { display: flex; gap: 8px; margin-bottom: 10px; align-items: center; }
.trn-manage-list { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; }
.trn-manage-row { display: flex; align-items: center; gap: 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; }
.trn-manage-info { flex: 1; min-width: 0; }
.trn-manage-name { font-weight: 700; font-size: 14px; color: var(--text-primary); cursor: pointer; display: flex; align-items: center; gap: 4px; }
.trn-manage-name:hover { color: var(--accent); }
.trn-copy { flex-shrink: 0; background: var(--bg-tertiary); border: 1px solid var(--border); color: var(--text-secondary); border-radius: var(--radius-sm); width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition-fast); }
.trn-copy:hover { border-color: var(--accent-soft); color: var(--accent); }

/* Clan wall composer */
.clan-composer { display: flex; gap: 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; margin-bottom: 16px; }
.clan-composer-av { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; }
.clan-composer-main { flex: 1; min-width: 0; }
.clan-composer-main textarea { width: 100%; resize: none; background: none; border: none; outline: none; color: var(--text-primary); font-size: 15px; font-family: inherit; line-height: 1.5; min-height: 24px; }
.clan-composer-main textarea::placeholder { color: var(--text-muted); }
.clan-composer-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; border-top: 1px solid var(--border); padding-top: 10px; }
.clan-composer-hint { font-size: 12px; color: var(--text-muted); }
.clan-composer-hint strong { color: var(--accent); }
.clan-join-prompt { text-align: center; color: var(--text-muted); font-size: 14px; background: var(--bg-card); border: 1px dashed var(--border); border-radius: var(--radius-md); padding: 16px; margin-bottom: 16px; }
.clan-join-prompt strong { color: var(--accent); }
/* ================================================================
   COMMUNITIES  (clean, matches site theme)
   ================================================================ */
/* Give Communities, LFG and Messages more room: hide the right sidebar so the
   center column spans the full width (DMs get a proper wide chat pane). */
body[data-section="communities"] #app,
body[data-section="lfg"] #app,
body[data-section="messages"] #app { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
body[data-section="communities"] #right-sidebar,
body[data-section="lfg"] #right-sidebar,
body[data-section="messages"] #right-sidebar { display: none; }

.community-page, #communities-view { animation: commFade .2s ease; }
#communities-view, #community-page { padding: 8px 28px 48px; }
@keyframes commFade { from { opacity: 0; } to { opacity: 1; } }

/* ---- Discovery header ---- */
.comm-head { padding: 14px 2px 0; margin-bottom: 24px; }
.comm-head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.comm-head-title { font-size: 34px; font-weight: 800; letter-spacing: -.8px; color: var(--text-primary); margin: 0; }
.comm-new { display: inline-flex; align-items: center; gap: 7px; background: var(--accent); border: none; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; padding: 10px 17px; border-radius: var(--radius-sm); transition: background .15s; }
.comm-new:hover { background: var(--accent-2); }
.comm-head-sub { font-size: 15px; color: var(--text-secondary); margin: 9px 0 0; line-height: 1.5; }
.comm-head-stats { font-size: 14px; color: var(--text-secondary); margin-top: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 500; }
.comm-head-stats strong { color: var(--text-primary); font-weight: 800; }
.comm-dot { color: var(--text-muted); }

/* ---- Toolbar ---- */
.comm-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 30px; flex-wrap: wrap; }
.comm-toolbar-right { display: flex; align-items: center; gap: 10px; }
.comm-search { display: flex; align-items: center; gap: 8px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; color: var(--text-secondary); transition: border-color .15s; }
.comm-search:focus-within { border-color: var(--border-accent); }
.comm-search input { width: 160px; background: none; border: none; outline: none; color: var(--text-primary); font-size: 14px; font-weight: 500; }
.comm-search input::placeholder { color: var(--text-muted); }
.comm-sort { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; padding: 10px 12px; }
.comm-sort:hover { color: var(--text-primary); border-color: var(--border-accent); }
.comm-sort option { background: var(--bg-card); color: var(--text-primary); }
.comm-chips { display: inline-flex; gap: 3px; flex-wrap: wrap; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px; }
.comm-chip { background: none; border: none; color: var(--text-secondary); padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; border-radius: 8px; transition: background .15s, color .15s; }
.comm-chip:hover { color: var(--text-primary); background: var(--bg-card-hover); }
.comm-chip.active { color: #fff; background: var(--accent); }

/* ---- Sections ---- */
.comm-section { margin-bottom: 36px; }
.comm-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.comm-section-title { font-size: 17px; font-weight: 800; color: var(--text-primary); letter-spacing: -.3px; }
.comm-section-count { font-size: 12px; font-weight: 700; color: var(--accent-light); background: var(--accent-soft); border-radius: 999px; padding: 2px 9px; }
.comm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.comm-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 290px); gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.comm-carousel > .comm-card { scroll-snap-align: start; }
.comm-carousel::-webkit-scrollbar { height: 6px; }
.comm-carousel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 99px; }
.comm-joined-empty { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border: 1px dashed var(--border); border-radius: var(--radius-md); color: var(--text-muted); }
.comm-joined-empty svg { color: var(--text-muted); flex-shrink: 0; width: 20px; height: 20px; }
.comm-joined-empty p { font-size: 14px; margin: 0; }

/* ---- Card (flat, content-first) ---- */
.comm-card { position: relative; background: var(--bg-card); border: 1px solid transparent; border-radius: var(--radius-md); overflow: hidden; cursor: pointer; transition: background .16s ease, transform .16s ease; outline: none; }
.comm-card:hover, .comm-card:focus-visible { background: var(--bg-card-hover); transform: translateY(-2px); }
.comm-card:focus-visible { border-color: var(--border-accent); }
.comm-card-banner { position: relative; aspect-ratio: 16 / 5; background-size: cover; background-position: center; }
.comm-card-badges { position: absolute; top: 9px; right: 9px; z-index: 2; display: flex; gap: 5px; }
.comm-badge { font-size: 10px; font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 3px; background: rgba(10,11,16,.5); color: #fff; backdrop-filter: blur(4px); }
.comm-badge.feat { color: var(--accent-gold); }
.comm-badge.ver { color: var(--accent-light); }
.comm-badge.new { color: #4f9e6a; background: rgba(79,158,106,0.22); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.04em; }
.comm-card-body { position: relative; padding: 12px 14px 14px; }
.comm-card-avatar { position: absolute; top: -26px; left: 14px; width: 50px; height: 50px; border-radius: 14px; border: 3px solid var(--bg-card); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; font-size: 16px; }
.comm-card:hover .comm-card-avatar { border-color: var(--bg-card-hover); }
.comm-card-id { margin-left: 60px; min-height: 28px; display: flex; flex-direction: column; justify-content: center; }
.comm-card-name { font-size: 16px; font-weight: 800; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; letter-spacing: -.3px; }
.comm-card-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); margin-top: 2px; font-weight: 600; }
.comm-card-tag { font-weight: 700; color: var(--accent-light); }
.comm-card-dot { opacity: .5; }
.comm-card-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin: 11px 0 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 39px; }
.comm-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.comm-av-stack { display: flex; align-items: center; }
.comm-av-stack-item { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--bg-card); margin-left: -7px; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 800; color: #fff; background-size: cover; background-position: center; }
.comm-card:hover .comm-av-stack-item { border-color: var(--bg-card-hover); }
.comm-av-stack-item:first-child { margin-left: 0; }
.comm-card-count { font-size: 12px; color: var(--text-muted); margin-left: 9px; }
.comm-join-btn { background: none; color: var(--accent-light); border: 1px solid var(--border); border-radius: var(--radius-sm, 10px); padding: 6px 15px; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.comm-join-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.comm-join-btn:active { transform: scale(.96); }
.comm-join-btn.ghost { color: var(--text-secondary); }
.comm-join-btn.ghost:hover { background: var(--bg-secondary); border-color: var(--border-accent); color: var(--text-primary); }
.comm-joined-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--accent-green); }
.comm-pending-pill { font-size: 13px; font-weight: 700; color: var(--accent-gold); }

/* ---- Empty states ---- */
.comm-empty { text-align: center; padding: 56px 20px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.comm-empty-tab { padding: 46px 20px; }
.comm-empty-icon { width: 68px; height: 68px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); border: 1px solid var(--border-accent); color: var(--accent); margin-bottom: 12px; }
.comm-empty-icon svg { width: 28px; height: 28px; }
.comm-empty p { font-size: 14px; color: var(--text-muted); margin: 0 0 16px; }
.comm-empty .btn-primary { display: inline-flex; align-items: center; gap: 7px; }
.comm-empty-mini { text-align: center; color: var(--text-muted); font-size: 13px; padding: 16px; }

/* ---- Hub (detail) ---- */
.comm-topnav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px 6px; margin: -4px -4px 0; background: color-mix(in srgb, var(--bg-secondary) 90%, transparent); backdrop-filter: blur(10px); }
.comm-icon-btn { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary); width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: color .15s, border-color .15s; }
.comm-icon-btn:hover { color: var(--text-primary); border-color: var(--border-accent); }
.comm-topnav-name { flex: 1; font-weight: 800; font-size: 16px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comm-topnav-tag { color: var(--accent-light); font-weight: 700; }
.comm-hub-hero { position: relative; aspect-ratio: 4 / 1; min-height: 150px; max-height: 230px; border-radius: var(--radius-lg); background-size: cover; background-position: center; margin-top: 8px; }
.comm-hub-avatar { position: absolute; left: 22px; bottom: -34px; width: 92px; height: 92px; border-radius: 24px; border: 4px solid var(--bg-secondary); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; font-size: 30px; }
.comm-hub-head { padding: 46px 22px 0; }
.comm-hub-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.comm-hub-name { font-size: 25px; font-weight: 800; color: var(--text-primary); letter-spacing: -.4px; display: inline-flex; align-items: center; gap: 8px; }
.comm-hub-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.comm-hub-tag { color: var(--accent-light); font-size: 14px; font-weight: 800; }
.comm-cat-pill { font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; color: var(--accent-light); background: var(--accent-soft); }
.comm-verified { color: var(--accent-light); display: inline-flex; }
.comm-hub-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin: 14px 0; max-width: 680px; }
.comm-hub-meta { display: flex; align-items: center; gap: 10px; margin: 12px 0; flex-wrap: wrap; }
.comm-hub-meta .comm-av-stack-item { width: 28px; height: 28px; }
.comm-hub-stat { font-size: 14px; color: var(--text-muted); }
.comm-hub-stat strong { color: var(--text-primary); font-weight: 800; }
.comm-hub-dot { color: var(--text-muted); }
.comm-hub-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.comm-btn { display: inline-flex; align-items: center; gap: 7px; border-radius: var(--radius-sm, 12px); padding: 9px 17px; font-size: 14px; font-weight: 700; cursor: pointer; border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s, transform .1s; white-space: nowrap; }
.comm-btn:active { transform: scale(.97); }
.comm-btn-sm { padding: 7px 14px; font-size: 13px; }
.comm-btn-primary { background: var(--accent); color: #fff; }
.comm-btn-primary:hover { background: var(--accent-2); }
.comm-btn-ghost { background: var(--bg-card); border-color: var(--border); color: var(--text-secondary); }
.comm-btn-ghost:hover { border-color: var(--border-accent); color: var(--text-primary); }
.comm-btn-ghost.comm-btn-active { color: var(--accent-green); border-color: rgba(63,185,80,.32); background: rgba(63,185,80,.08); cursor: default; }
.comm-btn-joined { background: rgba(63,185,80,.1); border-color: rgba(63,185,80,.26); color: var(--accent-green); }
.comm-btn-joined .comm-btn-leave-label { display: none; }
.comm-btn-joined:hover { background: rgba(229,72,77,.1); border-color: rgba(229,72,77,.3); color: var(--accent-red); }
.comm-btn-joined:hover .comm-btn-joined-label { display: none; }
.comm-btn-joined:hover .comm-btn-leave-label { display: inline; }
.comm-btn-joined-label { display: inline-flex; align-items: center; gap: 6px; }
.comm-primary-hint { font-size: 12px; color: var(--text-muted); margin-top: 12px; padding: 8px 12px; background: var(--accent-subtle); border-left: 2px solid var(--accent); border-radius: 0 8px 8px 0; }
/* Manage dropdown */
.comm-manage { position: relative; }
.comm-manage > summary { list-style: none; }
.comm-manage > summary::-webkit-details-marker { display: none; }
.comm-manage-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 200px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 6px; box-shadow: var(--shadow-lift); display: flex; flex-direction: column; gap: 2px; }
.comm-manage-menu button { text-align: left; background: none; border: none; color: var(--text-secondary); padding: 10px 12px; border-radius: 9px; font-size: 13px; font-weight: 600; cursor: pointer; }
.comm-manage-menu button:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.comm-manage-menu button.comm-danger:hover { background: rgba(229,72,77,.1); color: var(--accent-red); }

/* ---- Tabs ---- */
.comm-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 22px 0 0; position: sticky; top: 54px; z-index: 10; background: color-mix(in srgb, var(--bg-secondary) 92%, transparent); backdrop-filter: blur(8px); padding-top: 4px; }
.comm-tab { position: relative; background: none; border: none; color: var(--text-secondary); padding: 13px 18px; font-size: 14px; font-weight: 700; cursor: pointer; transition: color .15s; }
.comm-tab::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent); transform: scaleX(0); transition: transform .18s ease; }
.comm-tab:hover { color: var(--text-primary); }
.comm-tab.active { color: var(--text-primary); }
.comm-tab.active::after { transform: scaleX(1); }
.comm-tab-content { padding-top: 18px; min-height: 240px; }

/* ---- Composer ---- */
.comm-composer { display: flex; gap: 12px; padding: 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 18px; transition: border-color .15s; }
.comm-composer.focused, .comm-composer:focus-within { border-color: var(--border-accent); }
.comm-composer-av { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; background-size: cover; background-position: center; }
.comm-composer-main { flex: 1; min-width: 0; }
.comm-composer-main textarea { width: 100%; background: none; border: none; outline: none; resize: none; color: var(--text-primary); font-size: 15px; font-family: inherit; line-height: 1.5; min-height: 28px; }
.comm-composer-media { margin: 10px 0; }
.comm-media-preview { position: relative; width: 140px; height: 100px; border-radius: 12px; background-size: cover; background-position: center; border: 1px solid var(--border); }
.comm-media-preview button { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.65); color: #fff; border: none; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; font-size: 12px; }
.comm-composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.comm-composer-label { font-size: 12px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
.comm-composer-label strong { color: var(--accent-light); }
.comm-composer-tools { display: flex; align-items: center; gap: 10px; }
.comm-composer-icon { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 6px; border-radius: 8px; display: inline-flex; transition: color .15s, background .15s; }
.comm-composer-icon:hover { color: var(--accent); background: var(--bg-card-hover); }
.comm-composer-count { font-size: 11px; color: var(--text-muted); }
.comm-join-prompt { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 18px; background: var(--bg-card); border: 1px dashed var(--border); border-radius: var(--radius-md); color: var(--text-secondary); font-size: 14px; margin-bottom: 18px; }
.comm-join-prompt strong { color: var(--text-primary); }

/* ---- Media grid ---- */
.comm-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.comm-media-cell { position: relative; aspect-ratio: 1; border-radius: 14px; background-size: cover; background-position: center; cursor: pointer; overflow: hidden; border: 1px solid var(--border); transition: transform .15s; }
.comm-media-cell .comm-media-hover { position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background .15s; }
.comm-media-cell:hover .comm-media-hover { background: rgba(0,0,0,.25); }
.comm-media-cell:hover { transform: scale(1.01); }
.comm-media-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); }
.comm-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.9); display: flex; align-items: center; justify-content: center; padding: 30px; cursor: zoom-out; animation: commFade .15s; }
.comm-lightbox img { max-width: 92vw; max-height: 90vh; border-radius: 12px; }
.comm-lightbox-close { position: absolute; top: 20px; right: 24px; background: rgba(255,255,255,.12); color: #fff; border: none; width: 40px; height: 40px; border-radius: 50%; font-size: 18px; cursor: pointer; }

/* ---- About ---- */
.comm-about { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; align-items: start; }
.comm-about-block { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; margin-bottom: 16px; }
.comm-about-block h4 { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.comm-prose { font-size: 14px; line-height: 1.65; color: var(--text-secondary); white-space: pre-wrap; margin: 0; }
.comm-count-pill { background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text-secondary); font-size: 11px; padding: 1px 9px; border-radius: 999px; }
.comm-member-list { display: flex; flex-direction: column; gap: 2px; }
.comm-member-row { display: flex; align-items: center; gap: 12px; padding: 9px 8px; border-radius: 12px; transition: background .12s; }
.comm-member-row:hover { background: var(--bg-card-hover); }
.comm-member-av { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; font-size: 14px; cursor: pointer; background-size: cover; background-position: center; }
.comm-member-info { flex: 1; min-width: 0; }
.comm-member-name { font-size: 14px; font-weight: 700; color: var(--text-primary); cursor: pointer; display: flex; align-items: center; gap: 7px; }
.comm-member-name:hover { color: var(--accent-light); }
.comm-role { font-size: 10px; font-weight: 800; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.comm-role.owner { background: rgba(201,162,39,.14); color: var(--accent-gold); }
.comm-role.mod { background: var(--accent-soft); color: var(--accent-light); }
.comm-member-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.comm-mini { background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text-secondary); border-radius: 9px; padding: 6px 11px; font-size: 12px; font-weight: 600; cursor: pointer; transition: color .12s, border-color .12s; }
.comm-mini:hover { border-color: var(--border-accent); color: var(--text-primary); }
.comm-mini.comm-danger:hover { border-color: var(--accent-red); color: var(--accent-red); }
.comm-about-side { position: sticky; top: 110px; }
.comm-about-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.comm-about-stat { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--text-muted); }
.comm-about-stat strong { color: var(--text-primary); font-weight: 700; }
.comm-tag-warn { font-size: 12px; color: var(--accent-gold); }

/* ---- Post community label ---- */
.post-community-label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--accent-light); cursor: pointer; font-weight: 600; }
.post-community-label:hover { text-decoration: underline; }
.comm-primary-badge { font-size: 12px; font-weight: 700; color: var(--accent-green); }

/* ---- Skeletons ---- */
.comm-skel { background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-hover) 37%, var(--bg-card) 63%); background-size: 400% 100%; animation: commShimmer 1.4s ease infinite; }
.comm-hero-skel { height: 78px; border-radius: var(--radius-md); margin-bottom: 26px; }
.comm-toolbar-skel { height: 40px; border-radius: var(--radius-sm, 10px); margin-bottom: 28px; }
.comm-card-skel { height: 230px; border-radius: var(--radius-lg); }
.comm-post-skel { height: 120px; border-radius: var(--radius-md); margin-bottom: 14px; }
.comm-hub-head .comm-hub-avatar.comm-skel { position: static; margin-top: 18px; }
@keyframes commShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ---- Responsive ---- */
@media (max-width: 880px) {
  .comm-head-title { font-size: 26px; }
  .comm-about { grid-template-columns: 1fr; }
  .comm-about-side { position: static; }
}
@media (max-width: 680px) {
  #communities-view, #community-page { padding: 8px 16px 40px; }
  .comm-grid { grid-template-columns: 1fr; }
  .comm-toolbar { align-items: stretch; }
  .comm-toolbar-right { padding-bottom: 8px; }
  .comm-search input { width: 110px; }
  .comm-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .comm-chip { flex-shrink: 0; }
  .comm-hub-hero { aspect-ratio: 5 / 2; min-height: 130px; }
  .comm-hub-avatar { width: 74px; height: 74px; left: 16px; bottom: -26px; font-size: 25px; }
  .comm-hub-head { padding: 36px 16px 0; }
  .comm-hub-top { flex-direction: column; }
  .comm-hub-actions { width: 100%; }
  .comm-hub-actions .comm-btn { flex: 1; justify-content: center; }
  .comm-tabs { overflow-x: auto; top: 52px; }
  .comm-tab { flex-shrink: 0; }
  .comm-media-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
}

/* ---- Guest browsing ---- */
.auth-guest { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); text-align: center; }
.auth-guest-btn { background: none; border: 1px solid var(--border); color: var(--text-secondary); border-radius: var(--radius-sm); padding: 10px 18px; font-size: 14px; font-weight: 600; cursor: pointer; transition: color .15s, border-color .15s; }
.auth-guest-btn:hover { color: var(--text-primary); border-color: var(--border-accent); }
.auth-guest-note { font-size: 12px; color: var(--text-muted); margin: 10px 0 0; }
#guest-bar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 4000; display: flex; align-items: center; gap: 18px; max-width: calc(100vw - 32px); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 14px 12px 18px; box-shadow: var(--shadow-lift); }
.guest-bar-info { display: flex; align-items: center; gap: 11px; min-width: 0; }
.guest-bar-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-green); flex-shrink: 0; }
.guest-bar-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.guest-bar-copy strong { font-size: 13.5px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.01em; }
.guest-bar-copy span { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guest-bar-actions { display: flex; gap: 8px; flex-shrink: 0; }
.guest-bar-btn { border-radius: var(--radius-full); padding: 8px 15px; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s, border-color .15s; white-space: nowrap; }
.guest-bar-btn.primary { background: var(--accent); color: #fff; border: 1px solid transparent; }
.guest-bar-btn.primary:hover { background: var(--accent-2); }
.guest-bar-btn.ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); }
.guest-bar-btn.ghost:hover { color: var(--text-primary); border-color: var(--border-accent); }
@media (max-width: 680px) {
  #guest-bar { bottom: 80px; left: 12px; right: 12px; transform: none; flex-direction: column; align-items: stretch; gap: 12px; }
  .guest-bar-copy span { white-space: normal; }
  .guest-bar-actions { justify-content: stretch; }
  .guest-bar-btn { flex: 1; text-align: center; }
}

/* ---- Onboarding: required profile picture ---- */
.onboard-card { width: 100%; max-width: 400px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 34px 28px 26px; text-align: center; box-shadow: var(--shadow-lift); }
.onboard-card.onboard-uploading { opacity: .6; pointer-events: none; }
.onboard-title { font-size: 24px; font-weight: 800; color: var(--text-primary); margin: 0 0 8px; letter-spacing: -.4px; }
.onboard-sub { font-size: 14px; color: var(--text-secondary); margin: 0 0 22px; line-height: 1.5; }
.onboard-avatar-preview { width: 112px; height: 112px; border-radius: 50%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; font-size: 42px; font-weight: 800; color: #fff; background-size: cover; background-position: center; border: 3px solid var(--border); }
.onboard-upload-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 22px; font-size: 14px; font-weight: 700; cursor: pointer; transition: border-color .15s, background .15s; }
.onboard-upload-btn:hover { border-color: var(--border-accent); background: var(--bg-card-hover); }
.onboard-hint { font-size: 12px; color: var(--text-muted); margin: 12px 0 0; }
.onboard-actions { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.onboard-continue { width: 100%; background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); padding: 12px; font-size: 15px; font-weight: 700; cursor: pointer; transition: background .15s, opacity .15s; }
.onboard-continue:disabled { opacity: .4; cursor: not-allowed; }
.onboard-continue:not(:disabled):hover { background: var(--accent-2); }
.onboard-skip { background: none; border: none; color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer; }
.onboard-skip:hover { color: var(--text-secondary); }

/* ================================================================
   CRYPTO GAMES
   ================================================================ */
body[data-section="crypto-games"] #app { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
body[data-section="crypto-games"] #right-sidebar { display: none; }
#crypto-games-view { padding: 8px 28px 48px; animation: commFade .2s ease; }

/* Mobile fix: Communities, Party (lfg) and Crypto Games override #app to a
   two-column "sidebar + content" grid to hide the right sidebar on desktop.
   At ≤560px the sidebar is display:none and --sidebar-w is 0, so that grid
   becomes "0px + content"; with the sidebar gone, #main-content auto-places
   into the empty 0px track and the page renders blank. Force a single
   full-width column on mobile so the content fills the screen. (Placed after
   all three overrides so it wins on source order at equal specificity.) */
@media (max-width: 560px) {
  body[data-section="communities"] #app,
  body[data-section="lfg"] #app,
  body[data-section="crypto-games"] #app { grid-template-columns: 1fr; }
}

/* Hero */
.cg-hero { position: relative; overflow: hidden; border-radius: var(--radius-lg); margin-bottom: 26px; border: 1px solid var(--border); background: linear-gradient(135deg, #14152a 0%, #101019 55%, #0c0d12 100%); }
.cg-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 130% at 90% 0%, rgba(20,241,149,.10), transparent 55%), radial-gradient(60% 120% at 5% 100%, rgba(122,126,140,.14), transparent 60%); pointer-events: none; }
.cg-hero-inner { position: relative; z-index: 1; padding: 30px 28px; }
.cg-hero-kicker { font-size: 11px; font-weight: 800; letter-spacing: 2px; color: #5ee9b5; margin-bottom: 8px; }
.cg-hero-title { font-size: 28px; font-weight: 800; color: var(--text-primary); letter-spacing: -.6px; margin: 0 0 8px; }
.cg-hero-sub { font-size: 14px; color: var(--text-secondary); max-width: 560px; margin: 0 0 16px; line-height: 1.5; }
.cg-chain-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.cg-chip { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .15s; }
.cg-chip:hover { border-color: var(--border-accent); color: var(--text-primary); }
.cg-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Sections */
.cg-section { margin-bottom: 34px; }
.cg-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cg-section-title { font-size: 18px; font-weight: 800; color: var(--text-primary); letter-spacing: -.3px; margin: 0; }
.cg-section-sub { font-size: 13px; color: var(--text-muted); margin: 3px 0 0; }
.cg-empty { padding: 26px; text-align: center; color: var(--text-muted); font-size: 14px; background: var(--bg-card); border: 1px dashed var(--border); border-radius: var(--radius-md); }
.cg-link { color: var(--accent-light); cursor: pointer; font-weight: 600; }
.cg-link:hover { text-decoration: underline; }
.cg-disclaimer { font-size: 12px; color: var(--text-muted); line-height: 1.6; padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); margin-top: 8px; }

/* Game cards */
.cg-game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.cg-game-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; cursor: pointer; transition: transform .16s ease, border-color .16s, box-shadow .16s; outline: none; }
.cg-game-card:hover, .cg-game-card:focus-visible { transform: translateY(-3px); border-color: var(--border-accent); box-shadow: var(--shadow-lift); }
.cg-game-banner { position: relative; height: 78px; }
.cg-game-logo { position: absolute; left: 14px; bottom: -18px; width: 48px; height: 48px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-weight: 900; color: #fff; font-size: 16px; border: 3px solid var(--bg-card); }
.cg-game-logo.lg { position: static; width: 64px; height: 64px; border-radius: 18px; font-size: 22px; border: none; }
/* Crypto game social links */
.cg-soc-icons { display: inline-flex; gap: 6px; margin-left: auto; margin-right: 8px; }
.cg-soc-ic { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; color: var(--text-secondary); background: rgba(255,255,255,0.05); border: 1px solid var(--border); cursor: pointer; transition: color .15s, background .15s, border-color .15s; }
.cg-soc-ic:hover { color: var(--text-primary); background: rgba(255,255,255,0.1); border-color: var(--border-accent); }
.cg-socials { margin: 4px 0 14px; }
.cg-socials-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.cg-socials-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cg-social { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--radius-full); background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; }
.cg-social:hover { color: var(--text-primary); border-color: var(--border-accent); transform: translateY(-1px); }
.cg-social-x:hover { background: rgba(255,255,255,0.08); color: #fff; }
.cg-social-dc:hover { background: rgba(88,101,242,0.16); color: #aab4ff; border-color: rgba(88,101,242,0.4); }
.cg-social-tg:hover { background: rgba(42,171,238,0.16); color: #6fd0ff; border-color: rgba(42,171,238,0.4); }

.cg-game-logo { overflow: hidden; }
.cg-game-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cg-game-banner.has-img, .cg-game-modal-hero.has-img { background-color: #0c0d12; }
.cg-game-body { padding: 24px 14px 14px; }
.cg-game-name { font-size: 16px; font-weight: 800; color: var(--text-primary); letter-spacing: -.2px; }
.cg-game-cat { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.cg-badge-row { display: flex; gap: 5px; flex-wrap: wrap; margin: 10px 0 12px; }
.cg-game-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cg-game-stat { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.cg-view-btn { background: none; border: 1px solid var(--border); color: var(--accent-light); border-radius: var(--radius-sm); padding: 6px 13px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all .15s; }
.cg-view-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Badges */
.cg-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary); white-space: nowrap; }
.cg-badge-tag { color: var(--accent-light); border-color: var(--accent-mid); background: var(--accent-soft); }
.cg-badge-chain { color: var(--ch, #14b8a6); border-color: color-mix(in srgb, var(--ch, #14b8a6) 35%, transparent); background: color-mix(in srgb, var(--ch, #14b8a6) 10%, transparent); }
.cg-badge-verified { color: #4ade80; border-color: rgba(74,222,128,.3); background: rgba(74,222,128,.08); }
.cg-badge-unverified { color: var(--text-muted); }
.cg-badge-featured { color: var(--accent-gold); border-color: rgba(184,154,50,.3); background: rgba(184,154,50,.08); }
.comm-badge.cg { color: var(--accent-light); background: var(--accent-muted); }
.comm-badge.cg-chain { color: var(--ch, #14b8a6); background: color-mix(in srgb, var(--ch, #14b8a6) 16%, transparent); }

/* Feed + tournaments */
.cg-feed { display: flex; flex-direction: column; }
.cg-tourney-list { display: flex; flex-direction: column; gap: 10px; }
.cg-tourney { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: border-color .15s, transform .12s; }
.cg-tourney:hover { border-color: var(--border-accent); transform: translateY(-1px); }
.cg-tourney-name { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.cg-tourney-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.cg-tourney-prize { font-size: 15px; font-weight: 800; color: var(--accent-green); }

/* Game modal */
.cg-game-modal { padding: 0; overflow: hidden; }
.cg-game-modal-hero { position: relative; height: 120px; display: flex; align-items: center; padding: 0 22px; }
.cg-modal-close { position: absolute; top: 12px; right: 12px; }
.cg-game-modal-body { padding: 18px 22px 22px; }
.cg-game-modal-body h3 { font-size: 22px; font-weight: 800; color: var(--text-primary); margin: 0 0 10px; }
.cg-game-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin: 12px 0; }
.cg-meta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 14px 0; }
.cg-meta { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.cg-meta span { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.cg-meta strong { font-size: 14px; color: var(--text-primary); }
.cg-verify-note { font-size: 12px; color: var(--text-muted); line-height: 1.5; padding: 10px 12px; background: var(--accent-subtle); border-left: 2px solid var(--accent); border-radius: 0 8px 8px 0; margin-bottom: 14px; }
.cg-game-modal-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* External link interstitial */
.cg-extlink-modal { text-align: center; padding: 28px 24px; max-width: 380px; }
.cg-extlink-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(245,158,11,.12); color: var(--accent-gold); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.cg-extlink-modal h3 { font-size: 19px; font-weight: 800; color: var(--text-primary); margin: 0 0 8px; }
.cg-extlink-url { font-size: 12px; color: var(--text-secondary); word-break: break-all; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; margin: 0 0 12px; }
.cg-extlink-warn { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin: 0 0 18px; }
.cg-extlink-actions { display: flex; gap: 10px; }
.cg-extlink-actions button { flex: 1; }

/* Create note + report */
.cg-create-note { font-size: 12px; color: var(--accent-gold); line-height: 1.5; padding: 10px 12px; background: rgba(184,154,50,.07); border: 1px solid rgba(184,154,50,.22); border-radius: var(--radius-sm); margin-bottom: 4px; }
.cg-report-sub { font-size: 13px; color: var(--text-secondary); margin: 0 0 12px; }
.cg-report-reasons { display: flex; flex-direction: column; gap: 2px; }
.cg-report-reason { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; transition: background .12s; }
.cg-report-reason:hover { background: var(--bg-card-hover); }
.cg-report-reason input { accent-color: var(--accent); }
.cg-report-reason span { font-size: 14px; color: var(--text-primary); }
.cg-report-detail { width: 100%; margin-top: 10px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); padding: 10px 12px; font-family: inherit; font-size: 14px; resize: vertical; }
.share-option-danger { color: var(--accent-red); }
.share-option-danger:hover { background: rgba(216,71,76,.1); }
.share-option-muted { color: var(--text-muted); cursor: default; }
.share-option-muted:hover { background: none; }
.post-edit-textarea { width: 100%; background: var(--bg-input, var(--bg-secondary)); border: 1px solid var(--border); border-radius: 12px; color: var(--text-primary); font-size: 15px; line-height: 1.5; padding: 12px 14px; resize: vertical; font-family: inherit; }
.post-edit-textarea:focus { outline: none; border-color: var(--accent); }
.post-detail-edit-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #fff; background: var(--accent); border: none; border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.post-detail-edit-btn:hover { filter: brightness(1.08); }

/* Games page crypto */
.filter-btn-crypto.active { background: #14b8a6; border-color: #14b8a6; color: #fff; }
.games-chain-row { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 20px 12px; }

/* Explore promo */
.cg-explore-promo { display: flex; align-items: center; gap: 14px; margin: 14px; padding: 16px 18px; border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(20,184,166,.10), rgba(122,126,140,.10)); border: 1px solid var(--border); cursor: pointer; transition: border-color .15s, transform .12s; }
.cg-explore-promo:hover { border-color: var(--border-accent); transform: translateY(-1px); }
.cg-explore-promo-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(20,184,166,.14); color: #5ee9b5; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cg-explore-promo-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cg-explore-promo-text strong { font-size: 15px; font-weight: 800; color: var(--text-primary); }
.cg-explore-promo-text span { font-size: 12px; color: var(--text-secondary); }
.cg-explore-promo-go { font-size: 13px; font-weight: 700; color: var(--accent-light); white-space: nowrap; }

@media (max-width: 680px) {
  #crypto-games-view { padding: 8px 14px 40px; }
  .cg-game-grid { grid-template-columns: 1fr; }
  .cg-hero-inner { padding: 22px 18px; }
  .cg-hero-title { font-size: 22px; }
  .cg-hero-sub { font-size: 13px; }
  .cg-meta-grid { grid-template-columns: 1fr; }
  .cg-section-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .cg-section-title { font-size: 16px; }
  /* chain chips scroll horizontally instead of wrapping into many rows */
  .cg-chain-chips, .games-chain-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
  .cg-chain-chips::-webkit-scrollbar, .games-chain-row::-webkit-scrollbar { display: none; }
  .cg-chip { flex-shrink: 0; }
  /* modals: full-width sheet feel, scrollable */
  .cg-game-modal, .cg-extlink-modal { max-width: 100%; }
  .cg-game-modal-hero { height: 96px; }
  .cg-game-modal-body { max-height: 70vh; overflow-y: auto; }
  .cg-explore-promo { flex-wrap: wrap; }
  .cg-explore-promo-go { width: 100%; }
}
@media (min-width: 481px) and (max-width: 680px) {
  .cg-game-grid { grid-template-columns: 1fr 1fr; }
}

/* ================= Crypto Proof Layer ================= */
.cg-badge-infoverified { background: rgba(139,92,246,.16); color: #c4b5fd; border: 1px solid rgba(139,92,246,.4); display: inline-flex; align-items: center; gap: 4px; }
.cg-badge-infoverified svg { width: 12px; height: 12px; }

/* Proof page sections inside the project modal */
.pf-section { margin: 16px 0 6px; border-top: 1px solid var(--border); padding-top: 14px; }
.pf-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.pf-section-head h4 { font-size: 15px; font-weight: 800; color: var(--text-primary); margin: 0; }
.pf-add-btn { font-size: 12px; font-weight: 700; color: #fff; background: var(--accent); border: none; border-radius: 8px; padding: 7px 12px; cursor: pointer; }
.pf-add-btn:hover { filter: brightness(1.08); }
.pf-tier-note { font-size: 11.5px; color: #c4b5fd; background: rgba(139,92,246,.1); border-radius: 8px; padding: 6px 10px; margin-bottom: 10px; }
.pf-fields { display: flex; flex-direction: column; gap: 8px; }
.pf-field { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; }
.pf-field-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.pf-field-label { font-size: 12px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .3px; }
.pf-field-val { font-size: 14px; color: var(--text-primary); word-break: break-word; line-height: 1.4; }
.pf-evidence { display: inline-block; margin-top: 5px; font-size: 12px; font-weight: 600; color: var(--accent); cursor: pointer; }
.pf-evidence:hover { text-decoration: underline; }
.pf-field-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; flex-wrap: wrap; }
.pf-by { font-size: 11px; color: var(--text-muted); }
.pf-verified-by { font-size: 11px; color: #8b5cf6; font-weight: 600; }
.pf-verify-btn { font-size: 11px; font-weight: 700; color: #c4b5fd; background: rgba(139,92,246,.14); border: 1px solid rgba(139,92,246,.4); border-radius: 7px; padding: 4px 10px; cursor: pointer; }
.pf-verify-btn:hover { background: rgba(139,92,246,.24); }
.pf-state { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.pf-st-verified { background: rgba(139,92,246,.16); color: #c4b5fd; border: 1px solid rgba(139,92,246,.4); }
.pf-st-community { background: var(--bg-card); color: var(--text-muted); border: 1px solid var(--border); }
.pf-st-disputed { background: rgba(239,68,68,.14); color: #fca5a5; border: 1px solid rgba(239,68,68,.4); }
.pf-empty { font-size: 13px; color: var(--text-muted); text-align: center; padding: 18px 12px; background: var(--bg-secondary); border: 1px dashed var(--border); border-radius: 12px; }
.pf-missing { margin-top: 12px; }
.pf-missing-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); margin-bottom: 7px; }
.pf-missing-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.pf-missing-chip { font-size: 12px; font-weight: 600; color: var(--text-secondary); background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px; cursor: pointer; }
.pf-missing-chip:hover:not(:disabled) { border-color: var(--accent); color: var(--text-primary); }
.pf-missing-chip:disabled { opacity: .5; cursor: not-allowed; }
.pf-scam-banner { font-size: 12.5px; font-weight: 600; color: #fca5a5; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.35); border-radius: 10px; padding: 9px 12px; margin: 4px 0 12px; line-height: 1.45; }
.pf-flag-btn { color: #fca5a5 !important; }
.pf-contributors { margin: 12px 0; }
.pf-contributors-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); margin-bottom: 7px; }
.pf-contributors-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-contributor { cursor: pointer; }
.pf-contributor-av { width: 28px; height: 28px; border-radius: 50%; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; }
.pf-tier { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.pf-tier-admin { background: rgba(139,92,246,.16); color: #c4b5fd; }
.pf-tier-trusted { background: rgba(34,197,94,.14); color: #86efac; }
.pf-tier-reviewer { background: var(--bg-card); color: var(--text-muted); border: 1px solid var(--border); }
.pf-contribute-sub, .pf-contribute-hint { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.pf-contribute-hint { margin-top: -4px; }

/* Proof Leaderboard */
.pf-board { display: flex; flex-direction: column; gap: 6px; }
.pf-board-row { display: flex; align-items: center; gap: 11px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 9px 13px; cursor: pointer; transition: border-color .15s; }
.pf-board-row:hover { border-color: var(--accent); }
.pf-board-rank { font-size: 13px; font-weight: 800; color: var(--text-muted); width: 22px; text-align: center; }
.pf-rank-1 { color: #fbbf24; } .pf-rank-2 { color: #cbd5e1; } .pf-rank-3 { color: #d97706; }
.pf-board-av { width: 34px; height: 34px; border-radius: 50%; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }
.pf-board-info { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pf-board-line { display: flex; align-items: center; gap: 7px; min-width: 0; }
.pf-board-meta { font-size: 11.5px; color: var(--text-muted); }
.pf-board-name { font-size: 14px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-board-rep { font-size: 13px; font-weight: 800; color: #c4b5fd; white-space: nowrap; }
.pf-board-head { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.pf-board-acc { display: flex; flex-direction: column; align-items: flex-end; gap: 0; white-space: nowrap; }
.pf-board-acc b { font-size: 15px; font-weight: 800; color: #86efac; }
.pf-board-acc span { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; }

/* Disclosed-holding chip + disclosure toggle */
.pf-field-chips { display: inline-flex; align-items: center; gap: 6px; }
.pf-holding { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(234,179,8,.14); color: #fcd34d; border: 1px solid rgba(234,179,8,.35); white-space: nowrap; }
.pf-disclose { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); cursor: pointer; margin: 2px 0; }
.pf-disclose input { width: 15px; height: 15px; accent-color: var(--accent); }

/* Analyst track-record card (profile) */
.pf-analyst-card { background: linear-gradient(180deg, rgba(139,92,246,.08), var(--bg-card)); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin: 12px 0; }
.pf-analyst-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pf-analyst-title { display: flex; flex-direction: column; gap: 1px; }
.pf-analyst-rank { font-size: 17px; font-weight: 800; color: #c4b5fd; }
.pf-analyst-sub { font-size: 11px; color: var(--text-muted); }
.pf-analyst-accuracy { display: flex; flex-direction: column; align-items: flex-end; }
.pf-analyst-accuracy b { font-size: 22px; font-weight: 800; color: #86efac; line-height: 1; }
.pf-analyst-accuracy span { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }
.pf-analyst-stats { display: flex; gap: 10px; margin-top: 12px; }
.pf-analyst-stat { flex: 1; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; padding: 8px; text-align: center; }
.pf-analyst-stat b { display: block; font-size: 17px; font-weight: 800; color: var(--text-primary); }
.pf-analyst-stat span { font-size: 10.5px; color: var(--text-muted); }
.pf-receipts { margin-top: 12px; }
.pf-receipts-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); margin-bottom: 5px; }
.pf-receipt { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-top: 1px solid var(--border); }
.pf-receipt-ic { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.pf-receipt-scam { background: rgba(239,68,68,.16); color: #fca5a5; }
.pf-receipt-verify { background: rgba(139,92,246,.16); color: #c4b5fd; }
.pf-receipt-text { flex: 1; font-size: 12.5px; color: var(--text-secondary); line-height: 1.4; }
.pf-receipt-time { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

/* Holder chip, claimed badge, dispute link, admin holder toggle */
.pf-holder-chip { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: rgba(34,211,238,.14); color: #67e8f9; border: 1px solid rgba(34,211,238,.35); vertical-align: middle; }
.cg-badge-claimed { background: rgba(34,197,94,.14); color: #86efac; border: 1px solid rgba(34,197,94,.35); }
.pf-scam-dispute { color: #c4b5fd; font-weight: 700; cursor: pointer; text-decoration: underline; }
.adm-btn-on { background: rgba(34,211,238,.16); color: #67e8f9; border-color: rgba(34,211,238,.4); }

/* Standing explainer */
.pf-repinfo-modal { max-width: 460px; }
.pf-repinfo-lead { font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; margin: 0 0 14px; }
.pf-repinfo-block { margin-bottom: 14px; }
.pf-repinfo-block h4 { font-size: 13px; font-weight: 800; color: var(--text-primary); margin: 0 0 7px; }
.pf-repinfo-block ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.pf-repinfo-block li { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.pf-repinfo-note { font-size: 11.5px; color: var(--text-muted); line-height: 1.5; padding: 10px 12px; background: var(--accent-subtle); border-left: 2px solid var(--accent); border-radius: 0 8px 8px 0; }

/* Profile reputation block (legacy) */
.pf-profile-rep { display: flex; align-items: center; gap: 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin: 12px 0; flex-wrap: wrap; }
.pf-profile-rep-main { display: flex; flex-direction: column; gap: 2px; }
.pf-profile-rep-score { font-size: 20px; font-weight: 800; color: #c4b5fd; }
.pf-profile-rep-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.pf-profile-rep-stats { display: flex; gap: 16px; margin-left: auto; flex-wrap: wrap; }
.pf-profile-rep-stat { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.pf-profile-rep-stat b { font-size: 15px; color: var(--text-primary); }
.pf-profile-rep-stat span { font-size: 10.5px; color: var(--text-muted); }

/* ---- Admin: Crypto Games ---- */
.adm-cg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.adm-section-title { font-size: 18px; font-weight: 800; color: var(--text-primary); margin: 0; }
.adm-section-sub { font-size: 12px; color: var(--text-muted); margin: 4px 0 0; max-width: 520px; line-height: 1.5; }
.adm-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
.adm-cg-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 720px; }
.adm-cg-table thead th { text-align: left; padding: 10px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); border-bottom: 1px solid var(--border); background: var(--bg-secondary); }
.adm-cg-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.adm-cg-table tr:last-child td { border-bottom: none; }
.adm-cg-table tr:hover td { background: var(--bg-card-hover); }
.adm-cg-removed { opacity: .5; }
.adm-cg-game { display: flex; align-items: center; gap: 10px; }
.adm-cg-logo { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; font-size: 12px; flex-shrink: 0; }
.adm-cg-name { font-weight: 700; color: var(--text-primary); }
.adm-cg-id { font-size: 11px; color: var(--text-muted); }
.adm-cg-updated { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.adm-cg-reports { background: rgba(216,71,76,.15); color: var(--accent-red); font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.adm-cg-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.adm-risk { font-size: 11px; font-weight: 700; text-transform: capitalize; padding: 2px 9px; border-radius: 999px; }
.adm-risk.low { background: rgba(63,185,80,.14); color: var(--accent-green); }
.adm-risk.med { background: rgba(201,162,39,.16); color: var(--accent-gold); }
.adm-risk.high { background: rgba(216,71,76,.16); color: var(--accent-red); }
.adm-risk.unk { background: var(--bg-secondary); color: var(--text-muted); }
.adm-cg-toggles { display: flex; gap: 20px; margin-top: 6px; }
.adm-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-primary); cursor: pointer; }
.adm-check input { accent-color: var(--accent); width: 16px; height: 16px; }

/* ================================================================
   VOICE COMMENTS
   ================================================================ */
.voice-mic-btn.recording, .voice-mic-btn:hover { color: var(--accent); }
.voice-stage { margin: 8px 0; }
.voice-rec, .voice-preview { display: flex; align-items: center; gap: 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; }
.voice-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-red); flex-shrink: 0; animation: voicePulse 1s ease infinite; }
@keyframes voicePulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.8); } }
.voice-rec-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.voice-timer { font-size: 13px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; min-width: 36px; }
.voice-wave { display: flex; align-items: center; gap: 2px; flex: 1; height: 22px; overflow: hidden; }
.voice-wave span { flex: 1; min-width: 2px; background: var(--accent); border-radius: 2px; opacity: .8; animation: voiceWave 1s ease-in-out infinite; }
.voice-wave span:nth-child(odd) { animation-delay: .15s; }
.voice-wave span:nth-child(3n) { animation-delay: .3s; }
.voice-wave span:nth-child(4n) { animation-delay: .45s; }
@keyframes voiceWave { 0%,100% { height: 5px; } 50% { height: 20px; } }
.voice-btn { background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text-secondary); border-radius: var(--radius-sm); padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer; flex-shrink: 0; transition: color .12s, border-color .12s; }
.voice-btn:hover { color: var(--text-primary); border-color: var(--border-accent); }
.voice-btn.voice-stop { background: var(--accent); border-color: var(--accent); color: #fff; }
.voice-btn.voice-cancel:hover { border-color: var(--accent-red); color: var(--accent-red); }
.voice-play { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); border: none; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.voice-play:hover { background: var(--accent-2); }
.voice-prev-meta { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.voice-prev-label { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.voice-dur { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* In-thread player */
.vc-player { display: inline-flex; align-items: center; gap: 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 6px 14px 6px 6px; margin: 6px 0; max-width: 320px; width: 100%; }
.vc-play { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); border: none; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background .12s; }
.vc-play:hover { background: var(--accent-2); }
.vc-ico-pause { display: none; }
.vc-player.playing .vc-ico-play { display: none; }
.vc-player.playing .vc-ico-pause { display: inline; }
.vc-bar { flex: 1; height: 5px; background: var(--bg-elevated); border-radius: 999px; cursor: pointer; overflow: hidden; min-width: 60px; }
.vc-fill { height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width .1s linear; }
.vc-time { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; flex-shrink: 0; min-width: 32px; text-align: right; }
.vc-err { font-size: 12px; color: var(--accent-red); }

@media (max-width: 560px) {
  .voice-rec, .voice-preview { flex-wrap: wrap; gap: 8px; padding: 10px; }
  .voice-wave { order: 5; flex-basis: 100%; }
  .vc-player { max-width: 100%; }
}

/* ---- Email verification banner ---- */
.verify-banner { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: color-mix(in srgb, var(--accent) 12%, var(--bg-secondary)); border-bottom: 1px solid var(--border-accent); color: var(--text-primary); position: sticky; top: 0; z-index: 12; }
.verify-banner svg { color: var(--accent-light); flex-shrink: 0; }
.verify-banner-text { flex: 1; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.verify-banner-btn { background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); padding: 7px 14px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .15s; }
.verify-banner-btn:hover { background: var(--accent-2); }
.verify-banner-btn:disabled { opacity: .6; cursor: default; }
.verify-banner-x { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px; padding: 4px 6px; flex-shrink: 0; }
.verify-banner-x:hover { color: var(--text-primary); }
@media (max-width: 560px) { .verify-banner-text { font-size: 12px; } .verify-banner { padding: 10px 12px; } }

/* ================================================================
   BOOT / LOADING SPLASH — spinning DXED mark
   ================================================================ */
#dxed-loader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Solid, opaque background — no backdrop blur, so nothing flickers while the
     app is still painting underneath. Clean and modern. */
  background: #08090e;
  perspective: 820px;
  opacity: 1;
  transition: opacity .5s ease, visibility .5s ease;
}
#dxed-loader.dxed-loader-hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.dxed-loader-mark {
  width: 128px;
  height: 128px;
  object-fit: contain;
  transform-style: preserve-3d;
  animation: dxedLoaderSpin 1.8s cubic-bezier(.65, 0, .35, 1) infinite;
  will-change: transform;
}
@keyframes dxedLoaderSpin {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .dxed-loader-mark { animation-duration: 3.5s; animation-timing-function: linear; }
  .bg-slides { animation: none !important; }
}

/* ================================================================
   COLLABORATION POSTS
   ================================================================ */
/* Composer: selected collaborator chips */
.collab-compose-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 4px 0 10px; }
.collab-compose-label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); margin-right: 2px; }
.collab-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 6px 4px 5px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-full); }
.collab-chip-av { width: 20px; height: 20px; border-radius: 50%; flex: none; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; }
.collab-chip-handle { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.collab-chip-x { border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 11px; line-height: 1; padding: 2px; border-radius: 50%; transition: color .15s, background .15s; }
.collab-chip-x:hover { color: var(--text-primary); background: rgba(255,255,255,0.08); }

/* Picker rows — collaborator add/added states */
.tag-player-row.is-added { opacity: 0.55; cursor: default; }
.tag-player-add, .tag-player-added { margin-left: auto; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-full); white-space: nowrap; }
.tag-player-add { color: var(--text-primary); border: 1px solid var(--border-strong, rgba(255,255,255,0.12)); }
.tag-player-added { color: var(--text-muted); }

/* Post card: clean "Co-created with …" row with small overlapping avatars */
.collab-row { display: flex; align-items: center; gap: 9px; margin: 11px 0 3px; min-width: 0; }
.collab-avs { display: inline-flex; align-items: center; flex: none; }
.collab-av {
  width: 24px; height: 24px; border-radius: 50%; flex: none; padding: 0; cursor: pointer;
  background-size: cover; background-position: center;
  border: 2px solid var(--bg-secondary, #0b0c0f); box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #fff; overflow: hidden; transition: transform .12s;
}
.collab-avs-2 .collab-av:nth-child(2) { margin-left: -8px; }
.collab-av:hover { transform: translateY(-1px); z-index: 1; }
.collab-text { font-size: 13px; line-height: 1.3; min-width: 0; }
.collab-cowith { color: var(--text-muted); font-weight: 500; }
.collab-cname {
  display: inline-flex; align-items: center; gap: 3px; background: none; border: none; padding: 0;
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-primary); transition: color .15s;
}
.collab-cname:hover { color: var(--accent, #c9a6ff); text-decoration: underline; }
.collab-and { color: var(--text-muted); font-weight: 500; margin: 0 4px; }
.collab-owner-note { display: flex; flex-wrap: wrap; gap: 10px; margin: 3px 0 4px; }
.collab-status { font-size: 11.5px; font-weight: 600; }
.collab-status-pending { color: var(--text-muted); }
.collab-status-declined { color: var(--text-faint, #6f6f6f); text-decoration: line-through; opacity: 0.8; }

/* Notifications: invite accept/decline */
.notif-collab-actions { display: flex; gap: 8px; margin-top: 8px; }
.notif-collab-accept, .notif-collab-decline { font-size: 12.5px; font-weight: 700; padding: 6px 16px; border-radius: var(--radius-full); cursor: pointer; transition: background .15s, transform .12s, border-color .15s; }
.notif-collab-accept { background: var(--text-primary); color: var(--bg-primary); border: 1px solid var(--text-primary); }
.notif-collab-accept:hover { transform: translateY(-1px); }
.notif-collab-accept:disabled, .notif-collab-decline:disabled { opacity: 0.5; cursor: default; transform: none; }
.notif-collab-decline { background: transparent; color: var(--text-secondary, #a1a1a1); border: 1px solid var(--border); }
.notif-collab-decline:hover { color: var(--text-primary); border-color: var(--border-strong, rgba(255,255,255,0.18)); }
.notif-collab-result { display: inline-block; margin-top: 7px; font-size: 12px; font-weight: 600; color: var(--text-muted); }

/* "+N more" modal */
.collab-modal-overlay { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); }
.collab-modal { width: min(380px, 100%); max-height: 70vh; overflow-y: auto; background: var(--bg-elevated, #161616); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,0.55); }
.collab-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); font-size: 15px; font-weight: 700; color: var(--text-primary); position: sticky; top: 0; background: inherit; }
.collab-modal-close { background: none; border: none; color: var(--text-muted); font-size: 14px; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.collab-modal-close:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); }
.collab-modal-list { padding: 8px; }
.collab-modal-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; background: none; border: none; border-radius: 12px; cursor: pointer; text-align: left; transition: background .15s; }
.collab-modal-row:hover { background: rgba(255,255,255,0.05); }
.collab-modal-av { width: 38px; height: 38px; border-radius: 50%; flex: none; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; }
.collab-modal-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.collab-modal-name { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; color: var(--text-primary); }
.collab-modal-handle { font-size: 12.5px; color: var(--text-muted); }
.collab-modal-empty { padding: 28px 16px; text-align: center; font-size: 13.5px; color: var(--text-muted); }

@media (max-width: 560px) {
  .collab-modal { width: 100%; }
  .notif-collab-accept, .notif-collab-decline { flex: 1; text-align: center; }
}

/* ================================================================
   NAV DECLUTTER — locks, locked-feature page, nav customizer
   ================================================================ */
/* small lock chip on locked nav items */
.nav-lock { display: inline-flex; align-items: center; margin-left: auto; color: var(--text-faint, #6f6f6f); opacity: 0.8; }
.nav-item.nav-locked .nav-lock svg { stroke: currentColor; }
/* Locked tiles in the mobile menu: muted/disabled look, with the lock pinned
   as a small badge in the top-right corner instead of dangling under the label. */
.mobile-more-item.nav-locked {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--bg-input, rgba(0,0,0,0.25));
}
.mobile-more-item.nav-locked .nav-lock {
  position: absolute;
  top: 8px;
  right: 8px;
  margin: 0;
  padding: 3px;
  border-radius: 50%;
  background: rgba(0,0,0,0.35);
  color: var(--text-secondary);
}
.mobile-more-item.nav-locked .nav-lock svg { width: 11px; height: 11px; display: block; }

/* locked feature ("coming soon") full-section state */
.feature-locked {
  max-width: 460px; margin: 8vh auto; text-align: center; padding: 24px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.feature-locked-icon {
  width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary, #a1a1a1);
  background: var(--bg-card, #161616); border: 1px solid var(--border, #262626);
}
.feature-locked-title { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: var(--text-primary); }
.feature-locked-text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-muted); }

/* settings → navigation order customizer */
.settings-section-desc { margin: 0 0 14px; font-size: 13px; line-height: 1.55; color: var(--text-muted); }
.navcust-list { display: flex; flex-direction: column; gap: 8px; }
.navcust-row {
  display: flex; align-items: center; gap: 11px; padding: 11px 13px;
  background: var(--bg-card, #161616); border: 1px solid var(--border, #262626); border-radius: 12px;
}
.navcust-grip { display: inline-flex; color: var(--text-faint, #6f6f6f); flex: none; }
.navcust-label { flex: 1; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.navcust-lock {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-muted); background: rgba(255,255,255,0.06); border-radius: 999px; padding: 2px 8px; margin-left: 6px;
}
.navcust-actions { display: inline-flex; gap: 6px; flex: none; }
.navcust-btn {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-secondary, #0b0c0f); border: 1px solid var(--border, #262626); border-radius: 8px;
  color: var(--text-secondary, #a1a1a1); cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.navcust-btn:hover:not(:disabled) { color: var(--text-primary); border-color: var(--border-strong, rgba(255,255,255,0.18)); }
.navcust-btn:disabled { opacity: 0.35; cursor: default; }

/* ================================================================
   VIDEO TRIM (composer)
   ================================================================ */
.video-trim-bar { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.video-trim-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--text-secondary, #a1a1a1);
  background: var(--bg-card, #161616); border: 1px solid var(--border, #262626); border-radius: 999px; padding: 6px 13px;
  transition: color .15s, border-color .15s;
}
.video-trim-btn:hover { color: var(--text-primary); border-color: var(--border-strong, rgba(255,255,255,0.18)); }
.video-trim-label { font-size: 12px; font-weight: 600; color: var(--accent, #c9a6ff); }

.trim-modal {
  width: min(560px, 100%); background: var(--bg-elevated, #161616);
  border: 1px solid var(--border, #262626); border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,0.55);
}
.trim-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.trim-header h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.trim-body { padding: 16px 18px; }
.trim-video-wrap { background: #000; border-radius: 12px; overflow: hidden; display: flex; justify-content: center; }
.trim-video-wrap video { width: 100%; max-height: 300px; display: block; }
/* timeline */
.trim-timeline {
  position: relative; height: 40px; margin: 18px 4px 6px; border-radius: 8px;
  background: var(--bg-secondary, #0b0c0f); border: 1px solid var(--border); cursor: pointer; touch-action: none;
}
.trim-range { position: absolute; top: 0; bottom: 0; background: rgba(201,166,255,0.18); border-left: 2px solid var(--accent, #c9a6ff); border-right: 2px solid var(--accent, #c9a6ff); }
.trim-handle {
  position: absolute; top: 50%; transform: translate(-50%, -50%); width: 16px; height: 46px;
  background: var(--accent, #c9a6ff); border-radius: 5px; cursor: ew-resize; z-index: 2; touch-action: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.trim-handle::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 2px; height: 18px; background: rgba(5,5,9,0.45); border-radius: 2px; box-shadow: 3px 0 0 rgba(5,5,9,0.45), -3px 0 0 rgba(5,5,9,0.45); }
.trim-playhead { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #fff; z-index: 1; pointer-events: none; }
.trim-info { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--text-muted); }
.trim-info b { color: var(--text-primary); font-weight: 700; margin-left: 4px; font-variant-numeric: tabular-nums; }
.trim-preview-btn {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-size: 12.5px; font-weight: 600;
  color: var(--text-primary); background: var(--bg-card, #161616); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px;
}
.trim-preview-btn:hover { border-color: var(--border-strong, rgba(255,255,255,0.18)); }
.trim-dur { margin-top: 10px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--text-secondary, #a1a1a1); }
.trim-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--border); }
@media (max-width: 560px) { .trim-modal { width: 100%; } }

/* ================================================================
   LIVE (beta)
   ================================================================ */
.nav-beta, .live-beta-tag {
  font-size: 9px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted); background: rgba(255,255,255,0.07); border-radius: 999px; padding: 2px 6px; margin-left: 6px;
}
.live-beta-tag { font-size: 11px; vertical-align: middle; }
.live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; padding: 4px 0; }
.live-card { cursor: pointer; border-radius: 14px; overflow: hidden; background: var(--bg-card, #161616); border: 1px solid var(--border); transition: border-color .15s, transform .15s; }
.live-card:hover { border-color: var(--border-strong, rgba(255,255,255,0.16)); transform: translateY(-2px); }
.live-thumb { position: relative; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; }
.live-play { width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,0.45); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; }
.live-card:hover .live-play { opacity: 1; }
.live-badge { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; color: #fff; background: #e0245e; padding: 3px 8px; border-radius: 6px; }
.live-badge.sched { background: rgba(0,0,0,0.6); color: var(--text-secondary, #a1a1a1); }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: livepulse 1.4s infinite; }
@keyframes livepulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.live-viewers { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(0,0,0,0.55); padding: 3px 8px; border-radius: 6px; }
.live-meta { display: flex; align-items: center; gap: 10px; padding: 11px 12px; }
.live-av { width: 34px; height: 34px; border-radius: 50%; flex: none; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; }
.live-info { min-width: 0; }
.live-title { font-size: 14px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-sub { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Player overlay */
.live-player-overlay { position: fixed; inset: 0; z-index: 3500; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(0,0,0,0.7); backdrop-filter: blur(6px); }
.live-player-overlay.hidden { display: none; }
.live-player { width: min(1040px, 100%); max-height: 92vh; overflow: hidden; display: flex; flex-direction: column; background: var(--bg-elevated, #161616); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
.live-player-head { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.live-player-title { flex: 1; min-width: 0; }
.live-player-body { display: grid; grid-template-columns: 1fr 320px; min-height: 0; }
.live-stage { background: #000; display: flex; flex-direction: column; }
.live-video { width: 100%; aspect-ratio: 16/9; background: #000; display: block; }
.live-stage-state { aspect-ratio: 16/9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: var(--text-muted); padding: 20px; }
.live-stage-state h3 { margin: 0; color: var(--text-primary); font-size: 18px; }
.live-stage-state p { margin: 0; font-size: 13.5px; }
.live-stage-icon { color: var(--text-secondary, #a1a1a1); }
.live-owner-tools { display: flex; gap: 8px; padding: 12px; background: var(--bg-secondary, #0b0c0f); border-top: 1px solid var(--border); }
.live-owner-tools .live-danger { color: #f0566e; margin-left: auto; }
.live-creds { padding: 12px 14px; background: var(--bg-secondary, #0b0c0f); border-top: 1px solid var(--border); }
.live-creds-title { font-size: 12px; font-weight: 700; color: var(--text-secondary, #a1a1a1); margin-bottom: 8px; }
.live-creds-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.live-creds-label { font-size: 11px; color: var(--text-muted); width: 50px; flex: none; }
.live-creds-row code { font-size: 11.5px; background: #000; border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; color: var(--text-primary); overflow: auto; white-space: nowrap; flex: 1; }
.live-creds-note { font-size: 12.5px; line-height: 1.55; color: var(--text-muted); background: var(--bg-card, #161616); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; }
/* Chat */
.live-chat { display: flex; flex-direction: column; border-left: 1px solid var(--border); min-height: 0; }
.live-chat-head { padding: 12px 14px; font-size: 13px; font-weight: 700; color: var(--text-primary); border-bottom: 1px solid var(--border); }
.live-chat-feed { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; min-height: 200px; }
.live-chat-msg { font-size: 13px; line-height: 1.4; color: var(--text-secondary, #a1a1a1); word-break: break-word; }
.live-chat-msg b { color: var(--text-primary); font-weight: 600; margin-right: 4px; }
.live-chat-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }
.live-chat-form input { flex: 1; background: var(--bg-secondary, #0b0c0f); border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; color: var(--text-primary); font-size: 13px; }
.live-chat-signin { padding: 14px; text-align: center; font-size: 12.5px; color: var(--text-muted); border-top: 1px solid var(--border); }
@media (max-width: 760px) {
  .live-player-body { grid-template-columns: 1fr; }
  .live-chat { border-left: none; border-top: 1px solid var(--border); max-height: 38vh; }
  .live-chat-feed { min-height: 120px; }
}

/* DXED verification badge — reusable inline SVG (verifiedMark / verifiedBadge).
   Solid bright purple scalloped badge with a white check; sharp at every size. */
.vbadge {
  display: inline-block;
  flex: none;                       /* never stretch/squish in flex rows */
  vertical-align: -0.16em;          /* sits centered on the username text */
  margin: 0 0 0 2px;
  filter: drop-shadow(0 0.5px 1px rgba(124, 58, 237, 0.45));  /* subtle premium glow */
}
.vbadge-shape { fill: #8b5cf6; }    /* DXED bright purple */
.vbadge-check { fill: #fff; }
/* Scammer badge — red image, same sizing/alignment as the verified badge */
.sbadge { filter: none; object-fit: contain; }
.adm-select-scam { color: #fca5a5; border-color: rgba(239,68,68,.4); }

/* Crypto project: contract address + live chart on profile */
.profile-ca { margin: 14px 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--bg-card); }
.profile-ca-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.profile-ca-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); }
.profile-ca-addr { font-size: 13px; font-weight: 600; color: var(--text-primary); font-family: ui-monospace, monospace; cursor: pointer; background: var(--bg-secondary); padding: 3px 9px; border-radius: 7px; }
.profile-ca-addr:hover { color: var(--accent); }
.profile-ca-chain { font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: #c4b5fd; background: rgba(139,92,246,.14); border: 1px solid rgba(139,92,246,.35); padding: 2px 8px; border-radius: 999px; }
.profile-ca-edit { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text-secondary); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; padding: 4px 12px; cursor: pointer; }
.profile-ca-edit:hover { color: var(--text-primary); border-color: var(--accent); }
.profile-ca-note { font-size: 11px; color: var(--text-muted); padding: 8px 14px; line-height: 1.5; }
.profile-ca-cta { margin: 14px 0; border: 1px dashed var(--border); border-radius: 14px; padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: linear-gradient(180deg, rgba(139,92,246,.06), var(--bg-card)); }
.profile-ca-cta-text { font-size: 13px; color: var(--text-secondary); line-height: 1.5; flex: 1; min-width: 200px; }

/* DXED native chart — compact card above the stats row */
.dxed-chart-mount { margin: 12px 0 4px; }
.dxed-chart-skel { height: 60px; border-radius: 12px; background: linear-gradient(90deg, var(--bg-card), var(--bg-secondary), var(--bg-card)); background-size: 200% 100%; animation: caSkel 1.2s infinite; }
@keyframes caSkel { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.dxed-chart-fail { font-size: 12px; color: var(--text-muted); padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); }
.dxed-chart-compact { display: flex; align-items: center; gap: 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; cursor: pointer; transition: border-color .15s; }
.dxed-chart-compact:hover { border-color: var(--accent); }
.dxed-chart-info { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; }
.dxed-chart-sym { font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: .3px; }
.dxed-chart-price { font-size: 18px; font-weight: 800; color: var(--text-primary); line-height: 1.1; }
.dxed-chart-change { font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 4px; }
.dxed-chart-change.up { color: #22c55e; } .dxed-chart-change.down { color: #ef4444; }
.dxed-chart-span { color: var(--text-muted); font-weight: 600; }
.dxed-chart-spark { flex: 1; height: 44px; min-width: 60px; }
.dxed-chart-spark svg { display: block; width: 100%; height: 100%; }
.dxed-chart-expand { flex-shrink: 0; background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text-muted); border-radius: 8px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.dxed-chart-expand:hover { color: var(--text-primary); border-color: var(--accent); }
.dxed-ca-sub { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }

/* Expanded chart modal */
.dxed-chart-modal { max-width: 560px; }
.dxed-chart-modal .dxc-price { color: var(--text-primary); font-weight: 800; margin-left: 4px; }
.dxc-chart { width: 100%; height: 210px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; touch-action: pan-y; }
.dxc-chart svg { display: block; width: 100%; height: 100%; touch-action: pan-y; pointer-events: none; }
.dxc-chart.dxic-host { height: auto; padding: 0; background: none; border: none; overflow: visible; }

/* Interactive candlestick chart — scroll sideways, price axis, OHLC readout */
.dxic { position: relative; width: 100%; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.dxic-scroll { position: absolute; inset: 0; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: crosshair; }
.dxic-scroll::-webkit-scrollbar { height: 0; display: none; }
.dxic-svg { display: block; }
.dxic-svg line, .dxic-svg rect { pointer-events: none; }
.dxic-axis { position: absolute; top: 0; right: 0; bottom: 0; width: 0; pointer-events: none; z-index: 2; }
.dxic-tick { position: absolute; right: 5px; transform: translateY(-50%); font-size: 10px; font-weight: 600; color: var(--text-muted); background: color-mix(in srgb, var(--bg-secondary) 78%, transparent); padding: 0 4px; border-radius: 3px; white-space: nowrap; }
.dxic-readout { position: absolute; top: 7px; left: 9px; right: 9px; z-index: 3; display: none; gap: 4px 10px; flex-wrap: wrap; align-items: center; font-size: 10.5px; color: var(--text-secondary); pointer-events: none; }
.dxic-readout.show { display: flex; }
.dxic-readout b { color: var(--text-primary); font-weight: 700; }
.dxic-readout .dxic-ro-t { color: var(--text-muted); font-weight: 600; }
.dxic-readout .up { color: #26d07c; font-weight: 800; }
.dxic-readout .down { color: #ff5247; font-weight: 800; }
.dxic-hint { position: absolute; bottom: 5px; left: 0; right: 0; text-align: center; font-size: 9.5px; color: var(--text-muted); opacity: .55; pointer-events: none; z-index: 1; }
.dxic-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-muted); font-size: 13px; }
.dxc-chips { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.dxc-chip { flex: 1; min-width: 64px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; padding: 8px; text-align: center; }
.dxc-chip span { display: block; font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; }
.dxc-chip b { font-size: 13px; }
.dxc-chip.up b { color: #22c55e; } .dxc-chip.down b { color: #ef4444; }
.dxc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.dxc-stat { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; display: flex; justify-content: space-between; align-items: center; }
.dxc-stat span { font-size: 12px; color: var(--text-muted); }
.dxc-stat b { font-size: 14px; color: var(--text-primary); }
.dxc-ca { margin-bottom: 10px; }
.dxc-ca .profile-ca-addr { font-size: 12px; word-break: break-all; }
@media (max-width: 560px) { .profile-ca-cta { flex-direction: column; align-items: stretch; } .dxc-chart { height: 180px; } }

/* ===== Crypto Project profile — clean official token-page layout ===== */
.cp-banner { height: 150px; }
.cp-profile { padding: 0 18px 8px; }
.cp-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: -38px; margin-bottom: 12px; }
.cp-top .profile-avatar-lg { width: 84px; height: 84px; font-size: 30px; border: 4px solid var(--bg-primary); box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.cp-actions { display: flex; gap: 8px; align-items: center; padding-bottom: 4px; margin-bottom: 0; flex-wrap: wrap; justify-content: flex-end; }
.cp-identity { margin-bottom: 10px; }
.cp-name { display: flex; align-items: center; gap: 6px; font-size: 22px; font-weight: 800; color: var(--text-primary); line-height: 1.15; }
.cp-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 3px; font-size: 13px; color: var(--text-muted); }
.cp-handle { color: var(--text-muted); }
.cp-sep { opacity: .5; }
.cp-type { color: #c4b5fd; font-weight: 600; }
.cp-chain-tag { color: var(--text-secondary); font-weight: 600; }
.cp-online { color: var(--accent-green, #22c55e); font-size: 11.5px; font-weight: 600; }
.cp-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.cp-profile .profile-bio { margin: 10px 0 6px; }
.cp-profile .profile-joined { margin-bottom: 4px; }
.cp-profile .profile-socials-row { margin: 10px 0 2px; }
.cp-stats { display: flex; gap: 18px; align-items: center; margin: 12px 0 2px; font-size: 13px; color: var(--text-muted); flex-wrap: wrap; }
.cp-stat { white-space: nowrap; }
.cp-stat b { color: var(--text-primary); font-weight: 800; font-size: 15px; margin-right: 3px; }
.cp-stat.clickable-stat { cursor: pointer; }
.cp-stat.clickable-stat:hover b { color: var(--accent); }
.cp-tabs { margin-top: 6px; }

/* Project Token card (single unified card) */
.cp-token-card { margin: 12px 0 2px; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(180deg, rgba(139,92,246,.05), var(--bg-card)); overflow: hidden; }
.cp-token-top { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; border-bottom: 1px solid var(--border); }
.cp-token-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }
.cp-token-edit { background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text-muted); width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cp-token-edit:hover { color: var(--text-primary); border-color: var(--accent); }
.cp-token-main { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; }
.cp-token-info { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; }
.cp-token-sym { font-size: 12px; font-weight: 700; color: var(--text-muted); letter-spacing: .3px; }
.cp-token-price { font-size: 22px; font-weight: 800; color: var(--text-primary); line-height: 1.1; }
.cp-token-mc { font-size: 11.5px; font-weight: 600; color: var(--text-muted); margin-top: 3px; }
.cp-token-mc b { color: var(--text-secondary); font-weight: 800; }
.cp-token-spark { flex: 1; height: 48px; min-width: 60px; touch-action: pan-y; }
.cp-token-spark svg { display: block; width: 100%; height: 100%; }
.cp-token-foot { display: flex; align-items: center; gap: 8px; padding: 0 14px 12px; flex-wrap: wrap; }
.cp-token-chain { font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: #c4b5fd; background: rgba(139,92,246,.14); border: 1px solid rgba(139,92,246,.35); padding: 3px 9px; border-radius: 999px; }
.cp-token-ca { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-secondary); font-family: ui-monospace, monospace; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; padding: 4px 9px; cursor: pointer; }
.cp-token-ca:hover { color: var(--accent); border-color: var(--accent); }
.cp-token-chart { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #fff; background: var(--accent); border: none; border-radius: 8px; padding: 5px 12px; cursor: pointer; }
.cp-token-chart:hover { filter: brightness(1.08); }

/* Token tab */
.cp-token-tab { padding: 14px 4px; }
.cp-token-tab-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.cp-token-tab-sym { font-size: 16px; font-weight: 800; color: var(--text-muted); }
.cp-token-tab-price { font-size: 22px; font-weight: 800; color: var(--text-primary); }

@media (max-width: 560px) {
  .cp-profile { padding: 0 14px 6px; }
  .cp-top { margin-top: -32px; }
  .cp-top .profile-avatar-lg { width: 72px; height: 72px; font-size: 26px; }
  .cp-name { font-size: 20px; }
  .cp-actions .btn-secondary, .cp-actions .btn-primary { padding: 7px 12px; font-size: 13px; }
  .cp-token-price { font-size: 20px; }
  /* keep the feed clear of the bottom nav */
  .cp-tabs + #profile-tab-content { padding-bottom: 96px; }
}
/* In the verification modal the badge is centered on its own — drop the inline gap */
.verify-hero-shield .vbadge,
.verify-state-badge .vbadge { margin: 0; vertical-align: middle; }

/* "Get Verified" CTA on own profile — opens the verification application */
.btn-verify {
  display: inline-flex; align-items: center; gap: 6px;
  background: #8b5cf6; color: #fff; border: 1px solid #8b5cf6;
  border-radius: var(--radius-full, 999px);
  font-size: 13px; font-weight: 700; padding: 7px 14px;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.btn-verify:hover { background: #7c3aed; border-color: #7c3aed; }
.btn-verify svg { stroke: #fff; }

/* Verified accounts get a square (rounded-square) avatar, X-style. */
.va-square { border-radius: 22% !important; }
.avatar-frame-animated:has(.va-square) { border-radius: 24%; }

/* Square (verified) profile avatars: photo fills edge-to-edge.
   The inset 4px border was drawing black edges over the photo on the square
   shape; replace it with an outer ring so the picture reaches every edge. */
.profile-avatar-lg.va-square { border: none; box-shadow: 0 0 0 3px var(--bg-primary); }

/* ================================================================
   DM REPLY-TO-MESSAGE
   ================================================================ */
.chat-msg-col { display: flex; flex-direction: column; min-width: 0; }
.chat-msg.mine .chat-msg-col { align-items: flex-end; }
.chat-msg-bubble-wrap { display: flex; align-items: center; gap: 6px; }
.chat-msg.mine .chat-msg-bubble-wrap { flex-direction: row; }
.chat-msg:not(.mine) .chat-msg-bubble-wrap { flex-direction: row-reverse; }
.chat-msg-reply {
  flex: none; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; opacity: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-card, #161616); border: 1px solid var(--border); color: var(--text-muted);
  transition: opacity .15s, color .15s;
}
.chat-msg:hover .chat-msg-reply { opacity: 1; }
.chat-msg-reply:hover { color: var(--text-primary); }
/* quoted snippet above a reply bubble */
.chat-reply-quote {
  max-width: 280px; margin-bottom: 4px; padding: 5px 9px; border-radius: 8px;
  background: rgba(255,255,255,0.05); border-left: 2px solid var(--accent, #c9a6ff);
  display: flex; flex-direction: column; gap: 1px; overflow: hidden;
}
.chat-reply-quote-name { font-size: 11px; font-weight: 700; color: var(--accent, #c9a6ff); }
.chat-reply-quote-text { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the "replying to…" bar above the input */
.chat-reply-bar {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px; margin: 0 8px;
  background: var(--bg-card, #161616); border: 1px solid var(--border); border-bottom: none;
  border-radius: 10px 10px 0 0;
}
.chat-reply-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; border-left: 2px solid var(--accent, #c9a6ff); padding-left: 9px; }
.chat-reply-to { font-size: 11.5px; font-weight: 700; color: var(--accent, #c9a6ff); }
.chat-reply-snippet { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-reply-cancel { flex: none; background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: 6px; }
.chat-reply-cancel:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); }

/* ================================================================
   DXED V2 — LIVING FEED
   Activity ticker, daily card, pulse discovery modules, rich embeds,
   countdowns, discussion heat, infinite scroll. Everything rides the
   existing token system so themes and accent styles apply untouched.
   ================================================================ */

/* ── Activity ticker — the platform's pulse, one slim line ── */
.activity-ticker {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 14px; margin-bottom: 12px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--card-radius, 14px);
  font-size: var(--text-xs, 12px); color: var(--text-secondary);
  overflow: hidden;
}
.ticker-stats { display: flex; gap: 14px; flex: none; }
.ticker-stat { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ticker-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-green, #4ade80); flex: none;
  animation: tickerPulse 2.2s ease-in-out infinite;
}
@keyframes tickerPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .45); }
  50% { box-shadow: 0 0 0 5px rgba(74, 222, 128, 0); }
}
.ticker-event { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; text-align: right; }
.ticker-event strong { color: var(--text-secondary); font-weight: 600; }
.ticker-event.ticker-in { animation: tickerIn .45s var(--ease, ease); }
@keyframes tickerIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.btn-sm { padding: 7px 14px; font-size: var(--text-xs, 12px); }

/* ── Pulse modules — discovery interleaved into the feed ── */
.pulse-module {
  margin: 4px 0 12px; padding: 14px 0 6px;
  border: 1px solid var(--border); border-radius: var(--card-radius, 14px);
  background: var(--bg-card);
  animation: profile-fade-up .4s var(--ease, ease);
}
.pulse-module-slim { padding-bottom: 12px; }
.pulse-mod-head { display: flex; align-items: center; gap: 10px; padding: 0 16px 10px; }
.pulse-mod-icon { font-size: 18px; flex: none; }
.pulse-mod-title { font-size: var(--text-sm, 13.5px); font-weight: 700; color: var(--text-primary); }
.pulse-mod-sub { font-size: var(--text-2xs, 11px); color: var(--text-muted); margin-top: 1px; }
.pulse-module .post-card { border-left: none; border-right: none; border-radius: 0; margin: 0; }
.pulse-module .post-card:last-child { border-bottom: none; border-radius: 0 0 var(--card-radius, 14px) var(--card-radius, 14px); }

/* horizontal scroll rows */
.pulse-user-row, .pulse-comm-row, .pulse-live-row {
  display: flex; gap: 10px; padding: 2px 16px 10px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.pulse-user-row::-webkit-scrollbar, .pulse-comm-row::-webkit-scrollbar, .pulse-live-row::-webkit-scrollbar { display: none; }
.pulse-user-card, .pulse-comm-card {
  flex: none; width: 132px; padding: 14px 10px 12px; text-align: center;
  background: var(--bg-elevated, rgba(255,255,255,.02)); border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px); cursor: pointer;
  transition: transform .18s var(--ease, ease), border-color .18s;
}
.pulse-user-card:hover, .pulse-comm-card:hover { transform: translateY(-2px); border-color: var(--border-strong, var(--border)); }
.pulse-user-avatar, .pulse-comm-avatar {
  width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 18px; color: #fff;
}
.pulse-comm-avatar { border-radius: var(--radius-md, 12px); }
.pulse-user-name { font-size: var(--text-xs, 12px); font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pulse-user-sub { font-size: var(--text-2xs, 11px); color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pulse-follow-btn {
  margin-top: 9px; padding: 5px 14px; font-size: var(--text-2xs, 11px); font-weight: 700;
  border-radius: var(--radius-full, 99px); border: 1px solid var(--accent, #cc785c);
  background: var(--accent, #cc785c); color: #fff; cursor: pointer;
  transition: opacity .15s;
}
.pulse-follow-btn:hover { opacity: .85; }
.pulse-follow-btn.following { background: transparent; color: var(--text-secondary); border-color: var(--border-strong, var(--border)); }

/* tournaments + parties list */
.pulse-tourney-list { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 10px; }
.pulse-tourney-card {
  position: relative; padding: 11px 90px 11px 13px;
  background: var(--bg-elevated, rgba(255,255,255,.02)); border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px); cursor: pointer; transition: border-color .18s;
}
.pulse-tourney-card:hover { border-color: var(--border-strong, var(--border)); }
.pulse-tourney-name { font-size: var(--text-sm, 13.5px); font-weight: 700; color: var(--text-primary); }
.pulse-tourney-state {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  padding: 3px 10px; font-size: var(--text-2xs, 11px); font-weight: 700;
  border-radius: var(--radius-full, 99px);
  background: var(--accent-soft, rgba(204,120,92,.12)); color: var(--accent, #cc785c);
  text-transform: uppercase; letter-spacing: .04em;
}
.pulse-tourney-state.filling { background: rgba(251,146,60,.14); color: var(--accent-orange, #fb923c); }

/* live streams */
.pulse-live-card { flex: none; width: 180px; cursor: pointer; }
.pulse-live-thumb {
  position: relative; height: 100px; border-radius: var(--radius-md, 12px);
  background: var(--bg-input); border: 1px solid var(--border); margin-bottom: 7px;
}
.pulse-live-badge {
  position: absolute; top: 7px; left: 7px; padding: 2px 8px;
  background: var(--accent-red, #ef4444); color: #fff; font-size: 10px; font-weight: 800;
  border-radius: 5px; letter-spacing: .06em;
}
.pulse-live-title { font-size: var(--text-xs, 12px); font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pulse-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px; }

/* ── Rich embeds ── */
.embed-card { display: block; margin-top: 10px; border-radius: var(--radius-md, 12px); overflow: hidden; border: 1px solid var(--border); text-decoration: none; }
.embed-youtube { position: relative; cursor: pointer; background: #000; }
.embed-youtube .embed-thumb { display: block; width: 100%; max-height: 300px; object-fit: cover; opacity: .85; transition: opacity .2s; }
.embed-youtube:hover .embed-thumb { opacity: 1; }
.embed-youtube.playing { aspect-ratio: 16/9; }
.embed-youtube.playing iframe { width: 100%; height: 100%; display: block; }
.embed-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.65); color: #fff; transition: transform .18s var(--ease, ease), background .18s;
}
.embed-youtube:hover .embed-play { transform: translate(-50%,-50%) scale(1.08); background: rgba(0,0,0,.8); }
.embed-tag {
  position: absolute; bottom: 8px; left: 8px; padding: 3px 9px;
  background: rgba(0,0,0,.7); color: #fff; font-size: var(--text-2xs, 11px); font-weight: 600;
  border-radius: var(--radius-full, 99px);
}
.embed-steam { position: relative; background: var(--bg-input); }
.embed-steam .embed-thumb { display: block; width: 100%; max-height: 180px; object-fit: cover; }
.embed-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--bg-elevated, rgba(255,255,255,.02)); transition: border-color .18s, background .18s;
}
.embed-row:hover { border-color: var(--border-strong, var(--border)); background: var(--bg-card-hover, var(--bg-card)); }
.embed-row-icon { font-size: 20px; flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.embed-row-body { display: flex; flex-direction: column; min-width: 0; }
.embed-row-body strong { font-size: var(--text-sm, 13.5px); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.embed-row-body span { font-size: var(--text-2xs, 11px); color: var(--text-muted); }
.embed-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ── Countdown card ── */
.countdown-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 10px; padding: 12px 16px;
  border: 1px solid var(--border); border-radius: var(--radius-md, 12px);
  background: linear-gradient(135deg, var(--bg-elevated, rgba(255,255,255,.02)), transparent);
}
.countdown-label { font-size: var(--text-xs, 12px); font-weight: 600; color: var(--text-secondary); }
.countdown-value {
  font-size: var(--text-lg, 17px); font-weight: 800; letter-spacing: .02em;
  color: var(--accent, #cc785c); font-variant-numeric: tabular-nums;
}
.countdown-card.done .countdown-value { color: var(--accent-green, #4ade80); animation: tickerPulse 2s infinite; }

/* ── Discussion heat chip ── */
.post-heat {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 9px; padding: 4px 11px;
  font-size: var(--text-2xs, 11px); color: var(--text-secondary);
  background: var(--bg-elevated, rgba(255,255,255,.03));
  border: 1px solid var(--border); border-radius: var(--radius-full, 99px);
}

/* ── Infinite scroll + pull-to-refresh ── */
.feed-sentinel { min-height: 24px; padding: 8px 0 24px; }
.feed-loading-more { display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--text-muted); font-size: var(--text-xs, 12px); padding: 10px; }
.feed-end-mark { text-align: center; color: var(--text-muted); font-size: var(--text-xs, 12px); padding: 14px 0 6px; opacity: .7; }
.spinner-sm {
  width: 14px; height: 14px; border-radius: 50%; display: inline-block;
  border: 2px solid var(--border-strong, var(--border)); border-top-color: var(--accent, #cc785c);
  animation: spin .7s linear infinite;
}
.ptr-indicator {
  display: flex; justify-content: center; padding: 10px 0 2px; opacity: 0;
  transition: opacity .1s linear;
}
.ptr-indicator.ready .spinner-sm { border-top-color: var(--accent-green, #4ade80); }

/* ── DXED V2 — Comments: sort bar, roles, reactions, quotes ── */
.comment-sort-bar { display: flex; gap: 6px; padding: 10px 14px 2px; }
.comment-sort-chip {
  padding: 4px 12px; font-size: var(--text-2xs, 11px); font-weight: 700;
  border-radius: var(--radius-full, 99px); border: 1px solid var(--border);
  background: transparent; color: var(--text-muted); cursor: pointer;
  transition: all .15s var(--ease, ease);
}
.comment-sort-chip:hover { color: var(--text-secondary); border-color: var(--border-strong, var(--border)); }
.comment-sort-chip.active { background: var(--accent-soft, rgba(204,120,92,.12)); color: var(--accent, #cc785c); border-color: transparent; }

.comment-role {
  padding: 1px 7px; font-size: 9.5px; font-weight: 800; letter-spacing: .05em;
  border-radius: 5px; flex: none;
}
.role-op    { background: var(--accent-soft, rgba(204,120,92,.14)); color: var(--accent, #cc785c); }
.role-mod   { background: rgba(92,138,204,.16); color: #7ba4de; }
.role-dev   { background: rgba(92,204,138,.14); color: #5ccc8a; }
.role-staff { background: rgba(204,180,92,.16); color: #ccb45c; }

.comment-flag { font-size: var(--text-2xs, 11px); color: var(--text-muted); white-space: nowrap; }
.best-flag { color: var(--accent-gold, #ccb45c); }
.pinned-flag { color: var(--accent, #cc785c); }

.comment-reactions { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.creact-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2.5px 9px; font-size: var(--text-2xs, 11px); font-weight: 600;
  border-radius: var(--radius-full, 99px); border: 1px solid var(--border);
  background: var(--bg-elevated, rgba(255,255,255,.03)); color: var(--text-secondary);
  cursor: pointer; transition: all .15s;
}
.creact-chip:hover { border-color: var(--border-strong, var(--border)); transform: translateY(-1px); }
.creact-chip.mine { border-color: var(--accent, #cc785c); background: var(--accent-soft, rgba(204,120,92,.12)); color: var(--accent, #cc785c); }
.comment-react-bar {
  display: flex; gap: 4px; margin-top: 8px; padding: 6px 8px;
  background: var(--bg-elevated, var(--bg-card)); border: 1px solid var(--border);
  border-radius: var(--radius-full, 99px); width: fit-content;
  animation: tagPopIn .18s var(--ease, ease);
}
.comment-react-bar.hidden { display: none; }
.creact-pick {
  background: none; border: none; font-size: 19px; padding: 3px 7px;
  cursor: pointer; border-radius: 8px; transition: transform .12s var(--ease, ease), background .12s;
}
.creact-pick:hover { transform: scale(1.25) translateY(-2px); background: rgba(255,255,255,.06); }
.comment-react-toggle { letter-spacing: -2px; }

.comment-quote {
  margin: 4px 0 6px; padding: 7px 12px;
  border-left: 3px solid var(--border-strong, var(--border));
  background: var(--bg-elevated, rgba(255,255,255,.025));
  border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
  font-size: var(--text-xs, 12px); color: var(--text-muted); font-style: italic;
}
.comment-quote-pending { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.quote-cancel { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px; padding: 0 4px; }
.quote-cancel:hover { color: var(--text-primary); }
.comment-inline-gif { display: block; max-width: 240px; max-height: 200px; border-radius: 10px; margin-top: 7px; }

/* ── DXED V2 — Interests onboarding ── */
.onboard-wide { max-width: 560px; }
.onboard-chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin: 18px 0 6px; max-height: 300px; overflow-y: auto; }
.onboard-chips-center { justify-content: center; }
.onboard-chip {
  padding: 9px 18px; font-size: var(--text-sm, 13.5px); font-weight: 600;
  border-radius: var(--radius-full, 99px); border: 1px solid var(--border);
  background: var(--bg-elevated, rgba(255,255,255,.03)); color: var(--text-secondary);
  cursor: pointer; transition: all .16s var(--ease, ease);
}
.onboard-chip:hover { border-color: var(--border-strong, var(--border)); transform: translateY(-1px); }
.onboard-chip.on {
  background: var(--accent, #cc785c); border-color: var(--accent, #cc785c); color: #fff;
  box-shadow: 0 4px 16px -6px var(--accent-glow, rgba(204,120,92,.5));
}
.onboard-dots { display: flex; gap: 7px; justify-content: center; margin-top: 18px; }
.onboard-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong, var(--border)); transition: all .2s; }
.onboard-dot.on { background: var(--accent, #cc785c); transform: scale(1.25); }

/* ── DXED V2 — Profiles: showcase, arena card, recap, activity calendar ── */
.profile-showcase { margin: 10px 0 4px; display: flex; flex-direction: column; gap: 8px; }
.showcase-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.showcase-chip {
  padding: 4px 12px; font-size: var(--text-2xs, 11px); font-weight: 600;
  border-radius: var(--radius-full, 99px); border: 1px solid var(--border);
  background: var(--bg-elevated, rgba(255,255,255,.03)); color: var(--text-secondary);
  cursor: pointer; transition: all .15s;
}
.showcase-chip:hover { border-color: var(--accent, #cc785c); color: var(--accent, #cc785c); }
.showcase-weapon { cursor: default; }
.showcase-weapon:hover { border-color: var(--border-strong, var(--border)); color: var(--text-secondary); }
.showcase-setup { font-size: var(--text-xs, 12px); color: var(--text-muted); }
.showcase-edit {
  align-self: flex-start; padding: 5px 13px; font-size: var(--text-2xs, 11px); font-weight: 700;
  border-radius: var(--radius-full, 99px); border: 1px dashed var(--border-strong, var(--border));
  background: none; color: var(--text-muted); cursor: pointer; transition: all .15s;
}
.showcase-edit:hover { color: var(--accent, #cc785c); border-color: var(--accent, #cc785c); }

/* ── Followers preview card (profile) ── */
.followers-card {
  margin-top: 14px; padding: 14px 17px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--card-radius, 14px);
  background: var(--bg-card); transition: border-color .15s;
}
.followers-card:hover { border-color: var(--border-strong, rgba(255,255,255,.16)); }
.followers-card-title {
  font-size: var(--text-2xs, 11px); font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.followers-card-title span { color: var(--text-primary); font-family: ui-monospace, Menlo, monospace; }
.followers-card-row { display: flex; align-items: center; }
.followers-face {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 700;
  border: 2px solid var(--bg-card); margin-left: -8px;
  transition: transform .12s;
}
.followers-face:first-child { margin-left: 0; }
.followers-face:hover { transform: translateY(-2px); }
.followers-more { background: var(--bg-input, #1d1f26); color: var(--text-secondary); font-size: 11px; }

.arena-card {
  margin-top: 14px; padding: 15px 17px;
  border: 1px solid var(--border); border-radius: var(--card-radius, 14px);
  background:
    linear-gradient(160deg, rgba(204,120,92,.06), transparent 55%),
    var(--bg-card);
}
.arena-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.arena-card-title { font-size: var(--text-2xs, 11px); font-weight: 800; letter-spacing: .14em; color: var(--text-muted); }
.arena-card-rating { font-size: var(--text-sm, 13.5px); font-weight: 800; color: var(--accent, #cc785c); }
.arena-card-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.arena-stat { text-align: center; padding: 9px 4px; background: var(--bg-elevated, rgba(255,255,255,.02)); border-radius: var(--radius-sm, 10px); }
.arena-stat b { display: block; font-size: var(--text-md, 15px); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.arena-stat span { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); }
.arena-card-fav { margin-top: 10px; font-size: var(--text-xs, 12px); color: var(--text-muted); text-transform: capitalize; }
.arena-recent { display: flex; gap: 6px; margin-top: 10px; }
.arena-recent-dot {
  width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800;
}
.arena-recent-dot.w { background: rgba(74,222,128,.14); color: var(--accent-green, #4ade80); }
.arena-recent-dot.l { background: rgba(239,68,68,.12); color: var(--accent-red, #ef4444); }

.recap-card {
  margin-top: 12px; padding: 14px 17px;
  border: 1px solid var(--border); border-radius: var(--card-radius, 14px); background: var(--bg-card);
}
.recap-title { font-size: var(--text-2xs, 11px); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }
.recap-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.recap-stat { text-align: center; }
.recap-stat b { display: block; font-size: var(--text-lg, 17px); color: var(--text-primary); }
.recap-stat span { font-size: 10px; color: var(--text-muted); }
.recap-best { margin-top: 10px; font-size: var(--text-xs, 12px); color: var(--text-secondary); cursor: pointer; }
.recap-best:hover { color: var(--accent, #cc785c); }

.activity-cal { margin-top: 12px; padding: 14px 17px; border: 1px solid var(--border); border-radius: var(--card-radius, 14px); background: var(--bg-card); }
.activity-cal-title { font-size: var(--text-2xs, 11px); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }
.activity-cal-title span { font-weight: 500; letter-spacing: 0; text-transform: none; opacity: .7; }
.activity-cal-grid {
  display: grid; grid-template-rows: repeat(7, 10px); grid-auto-flow: column; grid-auto-columns: 10px;
  gap: 3px; overflow-x: auto; padding-bottom: 4px;
}
.cal-cell { width: 10px; height: 10px; border-radius: 2.5px; background: var(--bg-input); }
.cal-pad { background: transparent; }
.cal-l1 { background: color-mix(in srgb, var(--accent, #cc785c) 25%, var(--bg-input)); }
.cal-l2 { background: color-mix(in srgb, var(--accent, #cc785c) 45%, var(--bg-input)); }
.cal-l3 { background: color-mix(in srgb, var(--accent, #cc785c) 70%, var(--bg-input)); }
.cal-l4 { background: var(--accent, #cc785c); }

.accent-palette { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 16px; }
.accent-swatch {
  width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent;
  background: var(--bg-input); color: var(--text-muted); cursor: pointer; font-size: 13px;
  transition: transform .14s var(--ease, ease), border-color .14s;
}
.accent-swatch:hover { transform: scale(1.12); }
.accent-swatch.on { border-color: var(--text-primary); transform: scale(1.12); }
.modal-label { display: block; margin: 10px 0 5px; font-size: var(--text-xs, 12px); font-weight: 700; color: var(--text-secondary); }
.modal-label span { font-weight: 500; color: var(--text-muted); }
.modal-input {
  width: 100%; padding: 10px 13px; border-radius: var(--input-radius, 10px);
  border: 1px solid var(--border); background: var(--bg-input); color: var(--text-primary);
  font-size: var(--text-sm, 13.5px); outline: none; transition: border-color .15s;
}
.modal-input:focus { border-color: var(--accent, #cc785c); }

/* ── DXED V2 — countdown composer row + milestone notifications ── */
.compose-countdown-row { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.compose-countdown-row .modal-input { margin: 0; }
.notif-type-milestone { background: rgba(204,180,92,.18) !important; color: var(--accent-gold, #ccb45c) !important; }

/* ================================================================
   ALERTS — YouTube trend tracking tool
   ================================================================ */
.alerts-notice { background: rgba(189,138,87,.10); border: 1px solid rgba(189,138,87,.35); border-radius: 10px; padding: 12px 14px; font-size: var(--text-base); color: var(--text-secondary); margin-bottom: 14px; }
.alerts-notice code { color: var(--text-primary); }
.alerts-notice-err { background: rgba(207,90,94,.10); border-color: rgba(207,90,94,.4); }
.alerts-notice-err strong { color: var(--accent-red); }
.alerts-notice-hint { margin-top: 6px; color: var(--text-primary); }
.alerts-hero { color: var(--text-secondary); font-size: var(--text-base); line-height: 1.55; margin-bottom: 16px; max-width: 640px; }
.alerts-hero strong { color: var(--text-primary); }
.alerts-form { background: var(--bg-card); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 14px; margin-bottom: 18px; }
.alerts-form-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.alerts-field { display: flex; flex-direction: column; gap: 5px; min-width: 130px; }
.alerts-field-grow { flex: 1 1 220px; }
.alerts-field label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }
.alerts-field input, .alerts-field select { background: var(--bg-input); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: 9px 11px; color: var(--text-primary); font-size: var(--text-base); font-family: inherit; outline: none; }
.alerts-field input:focus, .alerts-field select:focus { border-color: var(--accent); }
.alerts-create-btn { white-space: nowrap; }
.alerts-card { background: var(--bg-card); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.alerts-card-paused { opacity: .65; }
.alerts-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.alerts-card-rule { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.alerts-kw { font-weight: 800; font-size: var(--text-md); color: var(--text-primary); }
.alerts-chip { background: var(--accent-soft); color: var(--accent-light); border-radius: 999px; padding: 3px 10px; font-size: var(--text-xs); font-weight: 700; }
.alerts-chip-paused { background: rgba(189,138,87,.14); color: var(--accent-orange); }
.alerts-card-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.alerts-del:hover { color: var(--accent-red); border-color: var(--accent-red); }
.alerts-card-meta { font-size: var(--text-xs); color: var(--text-muted); margin-top: 8px; }
.alerts-hits { display: flex; flex-direction: column; gap: 5px; margin-top: 9px; }
.alerts-hit { display: flex; align-items: center; gap: 7px; font-size: var(--text-sm); color: var(--text-secondary); text-decoration: none; padding: 6px 9px; background: var(--bg-input); border-radius: 8px; }
.alerts-hit:hover { background: var(--accent-hover); }
.alerts-hit-title { color: var(--text-primary); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.alerts-hit-views { color: var(--accent-green); font-weight: 700; white-space: nowrap; }
.alerts-matches { margin-top: 12px; }
.alerts-match-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.alerts-video { display: block; text-decoration: none; background: var(--bg-secondary); border: 1px solid rgba(255,255,255,.05); border-radius: 10px; overflow: hidden; transition: border-color .15s; }
.alerts-video:hover { border-color: var(--accent-strong); }
.alerts-video-thumb { position: relative; aspect-ratio: 16/9; background: #000; }
.alerts-video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.alerts-video-dur { position: absolute; right: 6px; bottom: 6px; background: rgba(0,0,0,.8); color: #fff; font-size: var(--text-2xs); font-weight: 700; padding: 2px 5px; border-radius: 4px; }
.alerts-video-title { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); padding: 8px 10px 3px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.alerts-video-meta { font-size: var(--text-xs); color: var(--text-muted); padding: 0 10px 10px; }
.alerts-video-meta strong { color: var(--text-secondary); }
.alerts-empty-matches { font-size: var(--text-sm); color: var(--text-muted); padding: 10px 2px; }
.notif-type-yt_alert { background: rgba(207,90,94,.16) !important; color: var(--accent-red) !important; }
@media (max-width: 640px) { .alerts-form-row { flex-direction: column; align-items: stretch; } .alerts-field { min-width: 0; } }

/* ================================================================
   CREATOR INTELLIGENCE — admin analytics workspace
   ================================================================ */
.ci-tabs { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; scrollbar-width: thin; }
.ci-tabs .tab-btn { white-space: nowrap; }
.ci-rangebar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.ci-range-chip { background: var(--bg-card); border: 1px solid rgba(255,255,255,.08); color: var(--text-secondary); border-radius: 999px; padding: 5px 12px; font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.ci-range-chip.on { background: var(--accent-soft); color: var(--text-primary); border-color: var(--accent-strong); }
.ci-range-custom { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: var(--text-sm); }
.ci-range-custom input[type=date] { background: var(--bg-input); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; color: var(--text-primary); padding: 5px 8px; font-size: var(--text-sm); }
.ci-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ci-tile { background: var(--bg-card); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 12px 14px; }
.ci-tile-sm { padding: 9px 12px; }
.ci-tile-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.ci-tile-value { font-size: 22px; font-weight: 800; color: var(--text-primary); margin: 4px 0 2px; letter-spacing: -0.4px; }
.ci-tile-unit { font-size: var(--text-sm); color: var(--text-muted); margin-left: 2px; }
.ci-tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; }
.ci-spark { width: 120px; height: 30px; flex: 0 0 auto; }
.ci-delta { font-size: var(--text-xs); font-weight: 700; }
.ci-delta .ci-delta-sub { color: var(--text-muted); font-weight: 500; margin-left: 4px; }
.ci-up { color: var(--accent-green); } .ci-down { color: var(--accent-red); }
.ci-delta-none { color: var(--text-muted); }
.ci-info { color: var(--text-muted); cursor: help; font-size: 11px; }
.ci-card { background: var(--bg-card); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.ci-card h3 { font-size: var(--text-lg); margin-bottom: 2px; }
.ci-card h4 { font-size: var(--text-md); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.ci-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ci-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ci-chip { background: var(--bg-input); border: 1px solid rgba(255,255,255,.08); color: var(--text-secondary); border-radius: 999px; padding: 4px 11px; font-size: var(--text-xs); font-weight: 700; cursor: pointer; }
.ci-chip.on { background: var(--accent-soft); color: var(--text-primary); border-color: var(--accent-strong); }
.ci-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; font-size: var(--text-sm); color: var(--text-secondary); }
.ci-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.ci-legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 4px; }
.ci-legend-note { color: var(--text-muted); font-size: var(--text-xs); }
.ci-chart-wrap { position: relative; }
.ci-chart { width: 100%; height: 260px; display: block; }
.ci-tip { position: absolute; background: #1d1f26; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 8px 11px; font-size: var(--text-sm); color: var(--text-secondary); pointer-events: none; box-shadow: 0 8px 24px rgba(0,0,0,.4); z-index: 5; }
.ci-tip strong { color: var(--text-primary); }
.ci-tip-date { font-weight: 700; color: var(--text-primary); margin-bottom: 3px; }
.ci-unavail { background: var(--bg-secondary); border: 1px dashed rgba(255,255,255,.1); border-radius: 12px; padding: 11px 14px; margin-bottom: 14px; }
.ci-unavail-title { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); margin-bottom: 6px; }
.ci-unavail-row { display: flex; gap: 10px; font-size: var(--text-sm); color: var(--text-secondary); padding: 2px 0; flex-wrap: wrap; }
.ci-unavail-why { color: var(--text-muted); }
.ci-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.ci-toolbar-gap { flex: 1; }
.ci-input { background: var(--bg-input); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: 8px 11px; color: var(--text-primary); font-size: var(--text-base); font-family: inherit; outline: none; min-width: 0; }
.ci-input:focus { border-color: var(--accent); }
.ci-input-sm { max-width: 140px; }
.ci-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--text-secondary); cursor: pointer; }
.ci-scroll { overflow-x: auto; border: 1px solid rgba(255,255,255,.06); border-radius: 12px; }
.ci-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); min-width: 860px; }
.ci-table th { text-align: left; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.06); background: var(--bg-card); position: sticky; top: 0; }
.ci-table td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.04); color: var(--text-secondary); }
.ci-row { cursor: pointer; } .ci-row:hover td { background: var(--bg-card-hover); }
.ci-user { display: flex; align-items: center; gap: 9px; color: var(--text-primary); }
.ci-av { width: 34px; height: 34px; border-radius: 50%; background-size: cover; background-position: center; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; flex: 0 0 auto; }
.ci-av-lg { width: 56px; height: 56px; font-size: 20px; }
.ci-dim { color: var(--text-muted); font-size: var(--text-xs); }
.ci-flag { color: var(--accent-orange); font-weight: 700; font-size: var(--text-xs); }
.ci-pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 14px 0 4px; }
.ci-minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-bottom: 12px; }
.ci-mini { background: var(--bg-card); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 11px 13px; }
.ci-mini-title { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); margin-bottom: 6px; }
.ci-mini svg { width: 100%; height: 44px; }
.ci-mini-total { font-size: var(--text-xs); color: var(--text-secondary); margin-top: 4px; }
.ci-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; margin-bottom: 12px; }
.ci-creator-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ci-creator-head > div { flex: 1; min-width: 220px; }
.ci-headline-stats { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px; font-size: var(--text-sm); color: var(--text-secondary); }
.ci-headline-stats strong { color: var(--text-primary); }
.ci-bar-row { display: flex; align-items: center; gap: 9px; padding: 3px 0; font-size: var(--text-sm); }
.ci-bar-label { width: 90px; flex: 0 0 auto; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-bar-track { flex: 1; height: 8px; background: var(--bg-input); border-radius: 4px; overflow: hidden; }
.ci-bar-fill { display: block; height: 100%; background: #3987e5; border-radius: 4px 0 0 4px; }
.ci-bar-val { width: 80px; text-align: right; color: var(--text-secondary); flex: 0 0 auto; }
.ci-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.ci-content-line { display: flex; align-items: center; gap: 9px; background: var(--bg-card); border: 1px solid rgba(255,255,255,.05); border-radius: 10px; padding: 8px 11px; cursor: pointer; font-size: var(--text-sm); flex-wrap: wrap; }
.ci-content-line:hover { background: var(--bg-card-hover); }
.ci-content-title { color: var(--text-primary); font-weight: 600; flex: 1; min-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-tag { background: var(--accent-soft); color: var(--accent-light); border-radius: 999px; padding: 2px 8px; font-size: var(--text-2xs); font-weight: 700; }
.ci-mult { color: var(--accent-green); font-weight: 800; font-size: var(--text-sm); }
.ci-thumb-sm { width: 42px; height: 26px; border-radius: 5px; background-size: cover; background-position: center; background-color: #000; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.ci-thumb-lg { width: 120px; height: 68px; border-radius: 9px; background-size: cover; background-position: center; background-color: #000; flex: 0 0 auto; }
.ci-rank { margin-top: 5px; font-size: var(--text-sm); color: var(--text-secondary); cursor: help; }
.ci-note-row { display: flex; gap: 9px; align-items: flex-start; padding: 6px 0; font-size: var(--text-sm); color: var(--text-secondary); border-bottom: 1px solid rgba(255,255,255,.04); }
.ci-note-row:last-child { border-bottom: none; }
.ci-note-add { display: flex; gap: 8px; margin-top: 9px; }
.ci-note-add .ci-input { flex: 1; }
.ci-x { background: none; border: 1px solid rgba(255,255,255,.1); color: var(--text-muted); border-radius: 6px; font-size: 11px; padding: 3px 7px; cursor: pointer; flex: 0 0 auto; }
.ci-x:hover { color: var(--text-primary); }
.ci-baseline-note { margin-bottom: 10px; }
.ci-trend-chips { margin-bottom: 12px; }
.ci-trend-rank { width: 22px; text-align: center; font-weight: 800; color: var(--text-muted); flex: 0 0 auto; }
.ci-thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 10px; }
.ci-thumb-card { position: relative; background: var(--bg-card); border: 1px solid rgba(255,255,255,.06); border-radius: 10px; overflow: hidden; }
.ci-thumb-img { aspect-ratio: 16/9; background-size: cover; background-position: center; background-color: #000; }
.ci-thumb-meta { padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.ci-save { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.65); }
.ci-alert-card { padding: 11px 14px; }
.ci-alert-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ci-off { opacity: .6; }
.ci-history summary { cursor: pointer; font-size: var(--text-xs); color: var(--text-muted); margin-top: 6px; }
.ci-coll-card { cursor: pointer; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ci-coll-card:hover { background: var(--bg-card-hover); }
.ci-item-note { flex: 0 1 200px; }
.ci-picker { display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; background: rgba(5,6,9,.7); z-index: 200; }
.ci-picker-box { background: var(--bg-widget); border: 1px solid rgba(255,255,255,.09); border-radius: 14px; padding: 18px; width: min(360px, 92vw); display: flex; flex-direction: column; gap: 8px; }
.ci-picker-opt { background: var(--bg-card); border: 1px solid rgba(255,255,255,.07); color: var(--text-primary); border-radius: 9px; padding: 10px 12px; text-align: left; font-size: var(--text-base); cursor: pointer; }
.ci-picker-opt:hover { background: var(--bg-card-hover); }
@media (max-width: 700px) {
  .ci-tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .ci-toolbar { gap: 6px; }
  .ci-toolbar .ci-input { flex: 1 1 45%; }
  .ci-chart { height: 200px; }
  .ci-bar-label { width: 70px; }
  .ci-creator-head { gap: 10px; }
}


/* ================================================================
   YOUTUBE INTELLIGENCE — redesigned premium research workspace.
   Surface hierarchy: page (--bg-primary) → card (#14151b) → nested
   (#181a21). Restrained red accent #c9564f for YouTube identity.
   ================================================================ */
#youtube-intel-section { --yi-red: #c9564f; --yi-red-soft: rgba(201,86,79,.13); --yi-card: #14151b; --yi-nested: #181a21; --yi-border: rgba(255,255,255,.07); --yi-border-strong: rgba(255,255,255,.14); }
.yi-page { max-width: 1440px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.yi-fade { animation: yiFade .18s ease-out; }
@keyframes yiFade { from { opacity: .35; } to { opacity: 1; } }
.yi-skel { border-radius: 14px; margin-bottom: 12px; }
.yi-skel-row { display: flex; gap: 12px; }

/* ── page header ── */
.yi-pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.yi-pagehead-id { display: flex; align-items: center; gap: 14px; }
.yi-mark { width: 42px; height: 42px; border-radius: 12px; background: var(--yi-red-soft); color: var(--yi-red); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.yi-mark svg { width: 22px; height: 22px; }
.yi-title { font-size: 25px; font-weight: 700; letter-spacing: -0.4px; color: var(--text-primary); display: flex; align-items: center; gap: 10px; margin: 0; }
.yi-adminpill { font-size: 10px; font-weight: 700; color: var(--text-secondary); background: rgba(255,255,255,.06); border: 1px solid var(--yi-border); border-radius: 999px; padding: 2px 9px; letter-spacing: .3px; }
.yi-subtitle { font-size: 13.5px; color: #9aa0ad; margin: 3px 0 0; }
.yi-pagehead-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.yi-fresh { font-size: 12px; color: #9aa0ad; display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; }
.yi-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.yi-dot-ok { background: var(--accent-green); }
.yi-dot-warn { background: var(--accent-orange); }
.yi-banner { background: rgba(189,138,87,.09); border: 1px solid rgba(189,138,87,.3); border-radius: 12px; padding: 12px 16px; font-size: 13px; color: var(--text-secondary); }
.yi-banner code { color: var(--text-primary); }

/* ── buttons ── */
.yi-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 9px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; padding: 0 14px; height: 36px; transition: background .14s, border-color .14s, color .14s; border: 1px solid transparent; white-space: nowrap; }
.yi-btn svg { flex: 0 0 auto; }
.yi-btn:disabled { opacity: .55; cursor: default; }
.yi-btn:focus-visible { outline: 2px solid var(--yi-border-strong); outline-offset: 1px; }
.yi-btn-primary { background: var(--yi-red); color: #fff; }
.yi-btn-primary:hover:not(:disabled) { background: #d4645d; }
.yi-btn-secondary { background: rgba(255,255,255,.05); border-color: var(--yi-border); color: #d6d8de; }
.yi-btn-secondary:hover:not(:disabled) { background: rgba(255,255,255,.09); border-color: var(--yi-border-strong); }
.yi-btn-ghost { background: none; color: #9aa0ad; border-color: transparent; }
.yi-btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,.06); color: var(--text-primary); }
.yi-btn-sm { height: 30px; padding: 0 11px; font-size: 12px; }
.yi-btn-icon { width: 34px; height: 34px; padding: 0; background: none; border-color: transparent; color: #9aa0ad; flex: 0 0 auto; }
.yi-btn-icon:hover { background: rgba(255,255,255,.07); color: var(--text-primary); }

/* ── internal navigation (no native scrollbar, edge fade on mobile) ── */
.yi-nav { position: relative; }
.yi-nav-scroll { display: flex; gap: 4px; align-items: center; background: var(--yi-card); border: 1px solid var(--yi-border); border-radius: 12px; padding: 4px; flex-wrap: wrap; }
@media (max-width: 700px) { .yi-nav-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .yi-nav-scroll::-webkit-scrollbar { display: none; } }
.yi-tab { flex: 0 0 auto; background: none; border: 1px solid transparent; border-radius: 9px; color: #a7acb8; font-size: 13px; font-weight: 600; font-family: inherit; padding: 0 14px; height: 36px; cursor: pointer; transition: background .14s, color .14s; display: inline-flex; align-items: center; gap: 6px; }
.yi-tab:hover { color: var(--text-primary); background: rgba(255,255,255,.05); }
.yi-tab.on { background: rgba(255,255,255,.08); border-color: var(--yi-border); color: var(--text-primary); box-shadow: inset 0 -2px 0 var(--yi-red); }
.yi-more { position: relative; margin-left: auto; }
.yi-more-menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--yi-nested); border: 1px solid var(--yi-border-strong); border-radius: 10px; padding: 5px; min-width: 170px; z-index: 40; box-shadow: 0 14px 40px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 2px; }
.yi-more-item { background: none; border: none; border-radius: 7px; color: #c6c9d1; font-size: 13px; font-weight: 600; font-family: inherit; text-align: left; padding: 9px 12px; cursor: pointer; }
.yi-more-item:hover { background: rgba(255,255,255,.07); color: var(--text-primary); }
.yi-more-item.on { color: var(--text-primary); background: rgba(201,86,79,.12); }

/* ── search ── */
.yi-search { display: flex; flex-direction: column; gap: 10px; }
.yi-search-field { display: flex; align-items: center; gap: 10px; background: var(--yi-card); border: 1px solid var(--yi-border); border-radius: 14px; padding: 6px 6px 6px 16px; height: 54px; transition: border-color .14s; }
.yi-search-field:focus-within { border-color: rgba(201,86,79,.5); }
.yi-search-icon { color: #9aa0ad; display: inline-flex; }
.yi-search-field input { flex: 1; background: none; border: none; outline: none; color: var(--text-primary); font-size: 14.5px; font-family: inherit; min-width: 0; }
.yi-search-field input::placeholder { color: #737884; }
.yi-search-go { height: 40px; border-radius: 10px; }
.yi-search-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.yi-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--yi-card); border: 1px solid var(--yi-border); border-radius: 999px; color: #c6c9d1; font-size: 12.5px; font-weight: 600; font-family: inherit; padding: 5px 12px 5px 6px; cursor: pointer; transition: border-color .14s, background .14s; }
.yi-chip:hover { background: var(--yi-nested); border-color: var(--yi-border-strong); }
.yi-chip img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.yi-chip svg { margin-left: 5px; color: #9aa0ad; }

/* ── hero ── */
.yi-hero { background: var(--yi-card); border: 1px solid var(--yi-border); border-radius: 16px; padding: 22px 24px; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.yi-hero-main { display: flex; gap: 18px; flex: 1; min-width: 280px; }
.yi-hero-av { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 2px solid var(--yi-border-strong); }
.yi-hero-av-empty { display: inline-flex; align-items: center; justify-content: center; background: var(--yi-nested); color: #9aa0ad; }
.yi-hero-id { min-width: 0; }
.yi-hero-name { font-size: 21px; font-weight: 700; letter-spacing: -0.3px; color: var(--text-primary); margin: 2px 0 4px; }
.yi-hero-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: #9aa0ad; }
.yi-hero-meta a { color: #c6c9d1; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.yi-hero-meta a:hover { color: var(--text-primary); }
.yi-hero-desc { font-size: 13px; color: #9aa0ad; line-height: 1.5; margin: 8px 0 0; max-width: 620px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yi-hero-tags { display: flex; align-items: center; gap: 9px; margin-top: 11px; flex-wrap: wrap; }
.yi-hero-actions { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.yi-vbig { position: relative; width: 200px; aspect-ratio: 16/9; border-radius: 12px; background-size: cover; background-position: center; background-color: #000; flex: 0 0 auto; }
.yi-rankline { margin-top: 7px; font-size: 13px; color: #c6c9d1; cursor: help; }
.yi-rankline strong { color: var(--text-primary); }

/* ── metrics ── */
.yi-metrics-primary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.yi-metrics-secondary { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.yi-metric { background: var(--yi-card); border: 1px solid var(--yi-border); border-radius: 14px; padding: 15px 17px; transition: border-color .14s; }
.yi-metric:hover { border-color: var(--yi-border-strong); }
.yi-metric-lg { padding: 19px 21px; }
.yi-metric-label { font-size: 11.5px; font-weight: 600; color: #9aa0ad; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.yi-metric-value { font-size: 30px; font-weight: 700; letter-spacing: -0.6px; color: var(--text-primary); margin-top: 7px; line-height: 1.1; }
.yi-metric-value-sm { font-size: 21px; }
.yi-vu { font-size: 13px; font-weight: 500; color: #9aa0ad; letter-spacing: 0; }
.yi-metric-spark { margin-top: 10px; }
.yi-spark { width: 100%; max-width: 240px; height: 44px; display: block; }
.yi-inline-note { font-size: 13px; color: #c6c9d1; background: var(--yi-card); border: 1px solid var(--yi-border); border-radius: 12px; padding: 11px 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.yi-inline-muted { color: #8a8f9c; background: none; border-style: dashed; }

/* ── source pills ── */
.yi-src { font-size: 9.5px; font-weight: 700; letter-spacing: .3px; border-radius: 999px; padding: 2px 7px; cursor: help; text-transform: capitalize; }
.yi-src-official { background: rgba(57,135,229,.13); color: #85b5ee; }
.yi-src-public { background: rgba(37,158,112,.13); color: #5fc394; }
.yi-src-estimated { background: rgba(189,138,87,.15); color: #d3a878; }
.yi-src-observed { background: var(--yi-red-soft); color: #dd928c; }
.yi-src-unavailable { background: rgba(255,255,255,.05); color: #8a8f9c; }

/* ── cards / sections ── */
.yi-card { background: var(--yi-card); border: 1px solid var(--yi-border); border-radius: 16px; padding: 20px 22px; }
.yi-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.yi-card-head h4 { font-size: 16px; font-weight: 650; color: var(--text-primary); margin: 0 0 3px; }
.yi-card-head .yi-meta { display: block; max-width: 640px; }
.yi-meta { font-size: 12px; color: #8a8f9c; }
.yi-noteline { margin-bottom: 12px; line-height: 1.5; }
.yi-topicline { font-size: 13px; color: #c6c9d1; margin-bottom: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.yi-tag { background: rgba(255,255,255,.06); color: #c6c9d1; border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 600; }
.yi-info { color: #8a8f9c; cursor: help; font-size: 12px; }
.yi-insight { margin-top: 14px; font-size: 13.5px; color: #d6d8de; background: var(--yi-nested); border-left: 3px solid var(--yi-red); border-radius: 8px; padding: 11px 14px; }

/* ── segmented control ── */
.yi-seg { display: inline-flex; align-items: center; gap: 4px; background: var(--yi-nested); border: 1px solid var(--yi-border); border-radius: 10px; padding: 3px; }
.yi-seg-btn { background: none; border: none; border-radius: 7px; color: #a7acb8; font-size: 12.5px; font-weight: 600; font-family: inherit; padding: 6px 12px; cursor: pointer; transition: background .14s, color .14s; }
.yi-seg-btn:hover { color: var(--text-primary); }
.yi-seg-btn.on { background: rgba(255,255,255,.09); color: var(--text-primary); }
.yi-compare { margin: 2px 0 0; gap: 8px; flex-wrap: wrap; background: none; border: none; padding: 0; display: flex; }
.yi-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #a7acb8; cursor: pointer; }

/* ── line chart ── */
.yi-line-wrap { position: relative; }
.yi-line { width: 100%; height: 220px; display: block; }
.yi-line-tip { position: absolute; top: 8px; background: var(--yi-nested); border: 1px solid var(--yi-border-strong); border-radius: 8px; padding: 7px 11px; font-size: 12px; color: #c6c9d1; pointer-events: none; box-shadow: 0 8px 24px rgba(0,0,0,.45); display: flex; flex-direction: column; gap: 1px; z-index: 5; }
.yi-line-tip strong { color: var(--text-primary); font-size: 14px; }

/* ── format distribution ── */
.yi-dist { display: flex; height: 26px; border-radius: 8px; overflow: hidden; background: var(--yi-nested); }
.yi-dist-seg { display: block; height: 100%; min-width: 2px; }
.yi-dist-seg + .yi-dist-seg { border-left: 2px solid var(--yi-card); }
.yi-dist-short { background: #b25550; }
.yi-dist-long { background: #4a7fc0; }
.yi-dist-live { background: #b3874e; }
.yi-dist-legend { display: flex; gap: 18px; margin: 10px 0 16px; font-size: 12.5px; color: #c6c9d1; flex-wrap: wrap; }
.yi-dist-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 6px; }
.yi-format-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.yi-format-panel { background: var(--yi-nested); border-radius: 12px; padding: 14px 16px; }
.yi-format-empty { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.yi-format-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 11px; }
.yi-format-head strong { font-size: 19px; color: var(--text-primary); }
.yi-format-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px 12px; }
.yi-format-grid > div { display: flex; flex-direction: column; font-size: 11px; color: #8a8f9c; }
.yi-format-grid span { font-size: 14.5px; font-weight: 650; color: var(--text-primary); }
.yi-fmt { font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 2.5px 9px; flex: 0 0 auto; }
.yi-fmt-short { background: rgba(178,85,80,.16); color: #dd928c; }
.yi-fmt-long { background: rgba(74,127,192,.16); color: #85b5ee; }
.yi-fmt-live { background: rgba(179,135,78,.16); color: #d3a878; }

/* ── video rows / tables ── */
.yi-vtable { display: flex; flex-direction: column; }
.yi-vrow { display: flex; align-items: center; gap: 14px; padding: 11px 10px; border-radius: 10px; cursor: pointer; transition: background .14s; border-bottom: 1px solid rgba(255,255,255,.04); }
.yi-vrow:last-child { border-bottom: none; }
.yi-vrow:hover { background: rgba(255,255,255,.035); }
.yi-vrow-thumb { position: relative; width: 106px; aspect-ratio: 16/9; border-radius: 8px; background-size: cover; background-position: center; background-color: #000; flex: 0 0 auto; }
.yi-vdur { position: absolute; right: 4px; bottom: 4px; background: rgba(0,0,0,.82); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; }
.yi-vrow-title { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 3px; }
.yi-vt { color: var(--text-primary); font-weight: 600; font-size: 13.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yi-vrow-stat { display: flex; flex-direction: column; align-items: flex-end; min-width: 76px; flex: 0 0 auto; }
.yi-vrow-stat span { font-size: 14px; font-weight: 650; color: var(--text-primary); }
.yi-vrow-stat i { font-style: normal; font-size: 10.5px; color: #8a8f9c; }
.yi-vrow-actions { display: flex; gap: 4px; align-items: center; flex: 0 0 auto; }
.yi-mult { color: var(--accent-green); font-weight: 750; }
.yi-rank { width: 24px; text-align: center; font-weight: 750; color: #8a8f9c; flex: 0 0 auto; font-size: 13px; }
.yi-row-av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.yi-collicon { width: 38px; height: 38px; border-radius: 10px; background: var(--yi-nested); color: #9aa0ad; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.yi-loadmore { display: flex; justify-content: center; padding: 14px 0 4px; }
.yi-mini-thumb { width: 64px; height: 36px; object-fit: cover; border-radius: 5px; vertical-align: middle; }
.yi-changerow { display: flex; gap: 12px; align-items: center; padding: 8px 0; font-size: 13px; color: #c6c9d1; border-bottom: 1px solid rgba(255,255,255,.04); flex-wrap: wrap; }
.yi-changerow:last-child { border-bottom: none; }
.yi-changerow .yi-meta { min-width: 76px; }
.yi-abhead { display: flex; gap: 12px; align-items: center; }
.yi-history summary { cursor: pointer; font-size: 12px; color: #8a8f9c; }
.yi-off { opacity: .6; }

/* ── filter bar + inputs ── */
.yi-filterbar { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.yi-input { background: var(--yi-card); border: 1px solid var(--yi-border); border-radius: 9px; padding: 0 12px; height: 38px; color: var(--text-primary); font-size: 13px; font-family: inherit; outline: none; min-width: 0; flex: 1 1 200px; transition: border-color .14s; }
.yi-input:focus { border-color: var(--yi-border-strong); }
.yi-input-sm { flex: 0 1 160px; }
.yi-notefield { flex: 0 1 200px; height: 32px; }

/* ── thumbnails grid ── */
.yi-thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.yi-thumb-card { background: var(--yi-card); border: 1px solid var(--yi-border); border-radius: 12px; overflow: hidden; transition: border-color .14s; }
.yi-thumb-card:hover { border-color: var(--yi-border-strong); }
.yi-thumb-img { position: relative; aspect-ratio: 16/9; background-size: cover; background-position: center; background-color: #000; }
.yi-thumb-meta { padding: 11px 13px; display: flex; flex-direction: column; gap: 5px; }
.yi-thumb-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; align-items: center; }

/* ── empty states ── */
.yi-empty { background: var(--yi-card); border: 1px dashed var(--yi-border-strong); border-radius: 16px; padding: 44px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.yi-empty-icon { font-size: 30px; }
.yi-empty-title { font-size: 15.5px; font-weight: 650; color: var(--text-primary); }
.yi-empty-sub { font-size: 13px; color: #9aa0ad; max-width: 460px; line-height: 1.55; }
.yi-empty-actions { margin-top: 12px; }

/* ── picker overlay ── */
.yi-picker { display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; background: rgba(5,6,9,.72); z-index: 200; }
.yi-picker-box { background: var(--yi-nested); border: 1px solid var(--yi-border-strong); border-radius: 14px; padding: 18px; width: min(380px, 92vw); display: flex; flex-direction: column; gap: 7px; max-height: 70vh; overflow-y: auto; }
.yi-picker-box h4 { font-size: 15px; color: var(--text-primary); margin: 0 0 4px; }
.yi-picker-opt { display: flex; align-items: center; gap: 10px; background: var(--yi-card); border: 1px solid var(--yi-border); color: var(--text-primary); border-radius: 10px; padding: 10px 13px; text-align: left; font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: border-color .14s; }
.yi-picker-opt:hover { border-color: var(--yi-border-strong); }
.yi-picker-opt img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.yi-picker-opt .yi-meta { margin-left: auto; }

/* ── responsive ── */
@media (max-width: 1100px) {
  .yi-metrics-primary { grid-template-columns: 1fr 1fr; }
  .yi-vrow-stat { min-width: 64px; }
}
@media (max-width: 700px) {
  .yi-page { gap: 16px; }
  .yi-title { font-size: 21px; }
  .yi-btn-lbl { display: none; }
  .yi-pagehead-actions .yi-btn { width: 38px; padding: 0; }
  .yi-nav { -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
  .yi-tab { height: 44px; }
  .yi-more { margin-left: 0; }
  .yi-metrics-primary { grid-template-columns: 1fr; }
  .yi-metrics-secondary { grid-template-columns: 1fr 1fr; }
  .yi-hero { padding: 16px; }
  .yi-hero-main { flex-direction: column; gap: 12px; }
  .yi-vbig { width: 100%; }
  .yi-vrow { flex-wrap: wrap; gap: 10px; }
  .yi-vrow-thumb { width: 92px; }
  .yi-vrow-title { flex-basis: calc(100% - 120px); }
  .yi-vrow-stat { flex-direction: row; gap: 5px; align-items: baseline; min-width: 0; }
  .yi-search-field { height: 50px; }
  .yi-format-grid { grid-template-columns: 1fr 1fr; }
  .yi-card { padding: 15px 16px; }
}

/* ── Official mint line in the sidebar legal footer ── */
.legal-mint { margin-top: 8px; font-size: 10.5px; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.legal-mint-addr { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-secondary); text-decoration: none; }
.legal-mint-addr:hover { color: var(--text-primary); }
.legal-mint-copy { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 11px; padding: 0 2px; }
.legal-mint-copy:hover { color: var(--text-primary); }

/* External-product hint on secondary nav links (DXED Arena) */
.nav-item .nav-ext { margin-left: auto; font-size: 11px; color: var(--text-muted); }

/* ── Signup gate: OAuth first-class ── */
.signup-gate-oauth { display: flex; flex-direction: column; gap: 9px; margin: 16px 0 4px; }
.signup-gate-oauth .oauth-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--bg-input, #17181d); border: 1px solid var(--border); color: var(--text-primary);
  font-size: 14px; font-weight: 600; padding: 11px; border-radius: var(--radius-sm, 10px); cursor: pointer;
  transition: background .15s, border-color .15s;
}
.signup-gate-oauth .oauth-btn:hover { background: var(--bg-card-hover, rgba(255,255,255,.06)); border-color: var(--border-strong, var(--border)); }
.signup-gate-or { display: flex; align-items: center; gap: 12px; margin: 10px 0 12px; color: var(--text-muted); font-size: 11.5px; }
.signup-gate-or::before, .signup-gate-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.empty-invite span { display: block; margin-top: 6px; }