/* ── BENTRAD GAMING ── */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;600;700&family=Orbitron:wght@700;900&family=Share+Tech+Mono&family=Permanent+Marker&display=swap');

:root {
  --bg:       #080b10;
  --bg2:      #0d1118;
  --bg3:      #121820;
  --card:     #161e28;
  --panel:    #161e28;
  --border:   #1e2d3d;
  --accent:   #00c8ff;
  --accent2:  #ff6a00;
  --cyan:     #00c8ff;
  --orange:   #ff6a00;
  --green:    #39ff14;
  --olive:    #6b8a3d;
  --olive-bright: #8aad5a;
  --red:      #ff2244;
  --text:     #c8d8e8;
  --dim:      #4a6070;
  --glow:     0 0 24px rgba(0,200,255,0.35);
  --glow2:    0 0 24px rgba(255,106,0,0.35);
}

/* ── LIGHT THEME ─────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:       #eef2f7;
  --bg2:      #e2e8f0;
  --bg3:      #dce4ed;
  --card:     #ffffff;
  --panel:    #f0f4f8;
  --border:   #c8d4e0;
  --accent:   #0088cc;
  --accent2:  #d45800;
  --cyan:     #0088cc;
  --orange:   #d45800;
  --green:    #1a9e00;
  --olive:    #5a7a30;
  --olive-bright: #7a9a48;
  --red:      #cc1133;
  --text:     #1a2a3a;
  --dim:      #6b7f90;
  --glow:     0 0 16px rgba(0,136,204,0.2);
  --glow2:    0 0 16px rgba(212,88,0,0.2);
}
[data-theme="light"] .crt-scanlines { display: none; }
[data-theme="light"] .warroom-bg { opacity: 0.03; }
[data-theme="light"] .hero-scanlines { opacity: 0.02; }
[data-theme="light"] .navbar { background: rgba(255,255,255,0.92); backdrop-filter: blur(12px); }
[data-theme="light"] .modal-box { background: var(--card); }
[data-theme="light"] .sidebar { background: rgba(255,255,255,0.85); }
[data-theme="light"] .toast { background: var(--card); color: var(--text); }
/* Keep hero dark even in light mode — it's the brand identity */
[data-theme="light"] .hero-section { background: linear-gradient(135deg, #0a1020 0%, #080b10 100%); color: #c8d8e8; }
[data-theme="light"] .hero-section .hero-content,
[data-theme="light"] .hero-section .hero-hud,
[data-theme="light"] .hero-section .hero-footer { color: #c8d8e8; }
[data-theme="light"] .hero-footer { background: #080b10; color: #c8d8e8; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
  font-size: 16px;
  min-height: 100vh;
  overflow-x: hidden;
}

/* grid bg */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0,200,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,255,0.015) 1px, transparent 1px);
  background-size: 48px 48px;
}
/* secondary diagonal grid — war map feel */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(45deg, rgba(255,106,0,0.008) 1px, transparent 1px),
    linear-gradient(-45deg, rgba(255,106,0,0.008) 1px, transparent 1px);
  background-size: 96px 96px;
}

/* ── CRT scanlines — global subtle overlay ── */
.crt-scanlines {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.035) 2px,
    rgba(0,0,0,0.035) 4px
  );
  animation: scanline-drift 8s linear infinite;
}
@keyframes scanline-drift {
  from { background-position: 0 0; }
  to   { background-position: 0 40px; }
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }

/* ══════════════════════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════════════════════ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 72px;
  background: rgba(8,11,16,0.92);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px);
  display: flex; align-items: center;
  padding: 0 24px;
  gap: 12px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.navbar.site-visible {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
/* hot accent line across top of navbar */
.navbar::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 30%, var(--accent2) 70%, transparent 100%);
  opacity: 0.7;
}

.nav-left { display: flex; align-items: center; flex-shrink: 0; }

.nav-logo-wrap {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; text-decoration: none;
  background: transparent;
}

.nav-logo {
  height: 56px; width: 56px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(0,200,255,0.6));
  transition: filter 0.3s;
}
.nav-logo-wrap:hover .nav-logo { filter: drop-shadow(0 0 20px rgba(0,200,255,1)); }

.nav-brand {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: 0.05em;
}
.brand-bent { color: #fff; }
.brand-rad  { color: var(--accent2); }

.nav-center {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  gap: 4px;
}

.nav-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Military clock — hidden on desktop, shown on mobile */
.nav-clock {
  display: none;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  color: var(--accent);
  text-shadow: 0 0 8px rgba(0,200,255,0.4);
  white-space: nowrap;
}

.nav-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 7px 14px;
  color: var(--dim);
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex; align-items: center; gap: 6px;
  text-decoration: none;
  letter-spacing: 0.03em;
}
.nav-btn:hover, .nav-btn.active {
  color: var(--accent);
  border-color: rgba(0,200,255,0.3);
  background: rgba(0,200,255,0.05);
}

.discord-nav { color: #8b9cf4; }
.discord-nav:hover { color: #fff; border-color: rgba(88,101,242,0.4); background: rgba(88,101,242,0.08); }

.nav-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  object-fit: cover;
  background: var(--bg);
}

.badge {
  background: var(--red);
  color: #fff;
  font-size: 0.6rem;
  border-radius: 10px;
  padding: 1px 5px;
  font-family: 'Share Tech Mono', monospace;
}

.btn-signin {
  background: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 7px 16px;
  color: var(--text);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-signin:hover { border-color: var(--accent); color: var(--accent); }

.btn-join {
  background: linear-gradient(135deg, #004d88, #00c8ff);
  border: none;
  border-radius: 3px;
  padding: 7px 16px;
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-join:hover { box-shadow: var(--glow); transform: translateY(-1px); }

.exit-btn { color: var(--red) !important; border-color: rgba(255,34,68,0.3) !important; }
.exit-btn:hover { background: rgba(255,34,68,0.08) !important; }

.home-btn { color: var(--dim) !important; font-size: 1rem; padding: 7px 10px !important; }
.home-btn:hover { color: var(--accent) !important; border-color: rgba(0,200,255,0.3) !important; }

/* Mobile tab bar — hidden on desktop */
.mobile-tab-bar {
  display: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.mobile-tab-bar.site-visible {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

/* ══════════════════════════════════════════════════════════════════
   HERO — Logo is the star
══════════════════════════════════════════════════════════════════ */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-between;
  padding: 80px 24px 0;
  overflow: hidden;
  z-index: 1;
}
/* vignette edges */
.hero-section::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(8,11,16,0.7) 100%);
  z-index: 1;
}

/* deep radial glow behind logo */
.hero-bg-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 700px; height: 700px;
  background: radial-gradient(ellipse at center,
    rgba(0,200,255,0.12) 0%,
    rgba(255,106,0,0.04) 40%,
    transparent 70%);
  pointer-events: none;
  animation: glow-breathe 5s ease-in-out infinite;
}

@keyframes glow-breathe {
  0%,100% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  50%      { transform: translate(-50%,-50%) scale(1.15); opacity: 0.7; }
}

/* floating particles */
.hero-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-particles span {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  animation: rise 10s infinite;
}
.hero-particles span:nth-child(1)  { left:8%;  animation-delay:0s;   animation-duration:9s; }
.hero-particles span:nth-child(2)  { left:18%; animation-delay:1.5s; animation-duration:11s; background:var(--accent2); }
.hero-particles span:nth-child(3)  { left:32%; animation-delay:3s;   animation-duration:8s; }
.hero-particles span:nth-child(4)  { left:48%; animation-delay:0.8s; animation-duration:12s; background:var(--green); }
.hero-particles span:nth-child(5)  { left:62%; animation-delay:2.2s; animation-duration:9s; background:var(--accent2); }
.hero-particles span:nth-child(6)  { left:74%; animation-delay:4s;   animation-duration:10s; }
.hero-particles span:nth-child(7)  { left:85%; animation-delay:1s;   animation-duration:7s; background:var(--green); }
.hero-particles span:nth-child(8)  { left:55%; animation-delay:3.5s; animation-duration:11s; }

@keyframes rise {
  0%   { bottom:-10px; opacity:0; }
  10%  { opacity:0.9; }
  90%  { opacity:0.3; }
  100% { bottom:110%; opacity:0; }
}

/* ── RADAR SWEEP ── */
.hero-radar {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 560px; height: 560px;
  pointer-events: none;
  z-index: 1;
}
.radar-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(0,200,255,0.08);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.radar-ring-1 { width: 200px; height: 200px; }
.radar-ring-2 { width: 360px; height: 360px; border-color: rgba(0,200,255,0.05); }
.radar-ring-3 { width: 520px; height: 520px; border-color: rgba(0,200,255,0.03); }

.radar-sweep {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(0,200,255,0.0) 300deg,
    rgba(0,200,255,0.12) 340deg,
    rgba(0,200,255,0.22) 355deg,
    rgba(0,200,255,0.06) 360deg
  );
  animation: radar-rotate 6s linear infinite;
}
@keyframes radar-rotate { to { transform: rotate(360deg); } }

/* ── BULLET TRACERS ── */
.hero-tracers {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1;
}
.tracer {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,200,50,0.9), transparent);
  opacity: 0;
  animation: tracer-fly linear infinite;
}
.tracer:nth-child(1) { width: 120px; top: 18%; animation-duration: 2.1s; animation-delay: 0.3s; }
.tracer:nth-child(2) { width: 80px;  top: 34%; animation-duration: 1.7s; animation-delay: 1.1s; background: linear-gradient(90deg, transparent, rgba(255,100,0,0.8), transparent); }
.tracer:nth-child(3) { width: 160px; top: 55%; animation-duration: 2.4s; animation-delay: 0.7s; }
.tracer:nth-child(4) { width: 60px;  top: 72%; animation-duration: 1.5s; animation-delay: 1.8s; background: linear-gradient(90deg, transparent, rgba(255,200,50,0.7), transparent); }
.tracer:nth-child(5) { width: 100px; top: 28%; animation-duration: 1.9s; animation-delay: 2.4s; background: linear-gradient(90deg, transparent, rgba(200,255,50,0.6), transparent); }
.tracer:nth-child(6) { width: 140px; top: 82%; animation-duration: 2.2s; animation-delay: 0.9s; }

@keyframes tracer-fly {
  0%   { left: -200px; opacity: 0; }
  5%   { opacity: 1; }
  90%  { opacity: 0.8; }
  100% { left: 110%; opacity: 0; }
}

/* ── IMPACT FLASHES ── */
.hero-impacts {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1;
}
.impact {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,200,50,0.9);
  box-shadow: 0 0 12px 4px rgba(255,150,0,0.6), 0 0 30px 8px rgba(255,100,0,0.3);
  opacity: 0;
  animation: impact-flash linear infinite;
}
.impact:nth-child(1) { top: 22%; left: 15%; animation-duration: 5.3s; animation-delay: 1.2s; }
.impact:nth-child(2) { top: 61%; left: 78%; animation-duration: 7.1s; animation-delay: 3.4s; }
.impact:nth-child(3) { top: 44%; left: 88%; animation-duration: 6.2s; animation-delay: 0.6s; }

@keyframes impact-flash {
  0%,85%,100% { opacity: 0; transform: scale(0); }
  86%          { opacity: 1; transform: scale(1); }
  90%          { opacity: 0.8; transform: scale(2.5); }
  95%          { opacity: 0; transform: scale(4); }
}

/* ── LOCK-ON BRACKETS ── */
.lockon {
  position: absolute;
  width: 28px; height: 28px;
  z-index: 3;
  animation: lockon-pulse 3s ease-in-out infinite;
}
.lockon-tl { top: 12px;  left: 12px;  border-top: 2px solid var(--accent2); border-left: 2px solid var(--accent2); }
.lockon-tr { top: 12px;  right: 12px; border-top: 2px solid var(--accent2); border-right: 2px solid var(--accent2); }
.lockon-bl { bottom: 12px; left: 12px;  border-bottom: 2px solid var(--accent2); border-left: 2px solid var(--accent2); }
.lockon-br { bottom: 12px; right: 12px; border-bottom: 2px solid var(--accent2); border-right: 2px solid var(--accent2); }

@keyframes lockon-pulse {
  0%,100% { opacity: 0.4; box-shadow: none; }
  50%      { opacity: 1;   box-shadow: 0 0 10px rgba(255,106,0,0.6); }
}

/* ── HERO SCANLINES ── */
.hero-scanlines {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.06) 3px,
    rgba(0,0,0,0.06) 4px
  );
}

/* ── WAR-ROOM HUD BAR ── */
.hero-hud {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center;
  gap: 32px; flex-wrap: wrap;
  padding: 10px 24px;
  background: linear-gradient(transparent, rgba(8,11,16,0.9));
  border-top: 1px solid rgba(0,200,255,0.08);
  z-index: 3;
}
.hud-item {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  color: rgba(74,96,112,0.7);
  text-transform: uppercase;
}
.hud-status { color: rgba(57,255,20,0.6); }
.hud-status::before {
  content: '';
  display: inline-block; width: 5px; height: 5px;
  background: var(--green); border-radius: 50%;
  box-shadow: 0 0 6px var(--green);
  margin-right: 6px;
  animation: blink 1.4s infinite;
  vertical-align: middle;
}
.hud-threat-val {
  color: var(--red);
  animation: threat-blink 2s ease-in-out infinite;
}
@keyframes threat-blink {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* logo stage */
.hero-content {
  display: flex; flex-direction: column;
  align-items: center; gap: 60px;
  position: relative; z-index: 2;
  width: 100%;
  padding-bottom: 60px;
}

.hero-logo-stage {
  position: relative;
  width: 520px; height: 520px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, #080b10 60%, transparent 100%);
  border-radius: 50%;
}

/* orbital rings */
.orbit {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid transparent;
  animation: spin-orbit 14s linear infinite;
}
.orbit::before {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  top: -5px; left: 50%;
  transform: translateX(-50%);
}

.orbit-1 {
  border-color: rgba(0,200,255,0.25);
  animation-duration: 12s;
}
.orbit-1::before { background: var(--accent); box-shadow: 0 0 12px var(--accent); }

.orbit-2 {
  inset: 30px;
  border-color: rgba(255,106,0,0.2);
  animation-direction: reverse;
  animation-duration: 8s;
}
.orbit-2::before { background: var(--accent2); box-shadow: 0 0 12px var(--accent2); }

.orbit-3 {
  inset: 64px;
  border-color: rgba(57,255,20,0.15);
  animation-duration: 18s;
}
.orbit-3::before { background: var(--green); box-shadow: 0 0 10px var(--green); }

@keyframes spin-orbit { to { transform: rotate(360deg); } }

.hero-logo {
  width: 420px; height: 420px;
  object-fit: contain;
  position: relative; z-index: 2;
  filter:
    drop-shadow(0 0 60px rgba(0,200,255,0.8))
    drop-shadow(0 0 120px rgba(0,200,255,0.35));
  animation: logo-pulse 4s ease-in-out infinite;
}

@keyframes logo-pulse {
  0%,100% {
    filter: drop-shadow(0 0 40px rgba(0,200,255,0.6)) drop-shadow(0 0 80px rgba(0,200,255,0.25));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 60px rgba(0,200,255,0.9)) drop-shadow(0 0 120px rgba(255,106,0,0.3));
    transform: scale(1.03);
  }
}

/* hero text */
.hero-text { text-align: center; }
.hero-actions {
  display: flex; gap: 16px; justify-content: center;
  margin-top: 32px; flex-wrap: wrap;
}

.hero-auth-row {
  display: flex; align-items: center; gap: 12px;
  justify-content: center;
  margin-top: 14px;
}
.hero-auth-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--dim);
}
.hero-auth-welcome {
  color: var(--accent);
  font-size: 0.7rem;
}
.hero-signin-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
  padding: 0;
}
.hero-signin-btn:hover { color: #fff; }

.btn-enter-site {
  background: linear-gradient(135deg, #004d88, #00c8ff);
  border: none; border-radius: 3px;
  padding: 16px 36px;
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  transition: all 0.25s;
  position: relative; overflow: visible;
}
/* shockwave ring */
.btn-enter-site::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 3px;
  border: 2px solid rgba(0,200,255,0.6);
  animation: shockwave 2.5s ease-out infinite;
  pointer-events: none;
}
@keyframes shockwave {
  0%   { transform: scale(1);    opacity: 0.7; }
  100% { transform: scale(1.35); opacity: 0; }
}
.btn-enter-site::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 3px;
  background: linear-gradient(135deg, transparent, rgba(255,255,255,0.1), transparent);
  transform: translateX(-100%);
  transition: transform 0.5s;
}
.btn-enter-site:hover::before { transform: translateX(100%); }
.btn-enter-site:hover { box-shadow: 0 0 50px rgba(0,200,255,0.6), 0 0 100px rgba(0,200,255,0.2); transform: translateY(-2px); }
.enter-arrow { font-size: 1.1rem; transition: transform 0.2s; }
.btn-enter-site:hover .enter-arrow { transform: translateX(5px); }

.btn-enter-ghost {
  background: none;
  border: 1px solid rgba(0,200,255,0.3);
  border-radius: 3px;
  padding: 16px 28px;
  color: var(--accent);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-enter-ghost:hover { border-color: var(--accent); background: rgba(0,200,255,0.07); }

.btn-enter-login {
  background: none;
  border: 1px solid rgba(255,106,0,0.4);
  border-radius: 3px;
  padding: 16px 28px;
  color: var(--accent2);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-enter-login:hover { border-color: var(--accent2); background: rgba(255,106,0,0.07); color: #fff; }

/* Deploy button — returning user hero CTA */
.btn-deploy-hero {
  background: linear-gradient(135deg, #1a3a00, #39ff14) !important;
  border: none;
  letter-spacing: 0.2em;
}

/* squad photo */
.hero-squad-pic {
  position: relative;
  max-width: 560px;
  width: 90vw;
  margin-top: 0;
}
.squad-img {
  width: 100%; border-radius: 4px; display: block;
  filter: saturate(0.9) contrast(1.05);
}
.squad-corner {
  position: absolute; width: 18px; height: 18px; z-index: 1;
}
.squad-tl { top:-3px; left:-3px; border-top:2px solid var(--accent); border-left:2px solid var(--accent); }
.squad-tr { top:-3px; right:-3px; border-top:2px solid var(--accent); border-right:2px solid var(--accent); }
.squad-bl { bottom:-3px; left:-3px; border-bottom:2px solid var(--accent); border-left:2px solid var(--accent); }
.squad-br { bottom:-3px; right:-3px; border-bottom:2px solid var(--accent); border-right:2px solid var(--accent); }
.squad-label {
  position: absolute; bottom: 10px; left: 10px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.58rem; letter-spacing: 0.15em;
  color: rgba(0,200,255,0.7);
  background: rgba(8,11,16,0.75);
  padding: 3px 8px;
  border-left: 2px solid var(--accent);
}

/* ── Founder signatures ── */
.hero-signatures {
  display: flex; flex-direction: column;
  align-items: center; gap: 16px;
  margin-top: 0;
  padding-top: 40px;
  position: relative;
  width: 100%;
  text-align: center;
}
.sig-line {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 180px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.sig-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.25em;
  color: var(--dim);
  text-transform: uppercase;
  animation: sigLabelPulse 3s ease-in-out infinite;
}
@keyframes sigLabelPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; color: rgba(0,200,255,0.8); }
}
.sig-names {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; justify-content: center;
  width: 100%;
  padding: 0 12px;
  box-sizing: border-box;
}
.sig-name {
  font-family: 'Permanent Marker', cursive;
  font-size: clamp(2rem, 5vw, 3.8rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.04em;
  transition: filter 0.3s, transform 0.3s;
  white-space: nowrap;
}
.sig-bent {
  color: #fff;
  text-shadow:
    0 0 20px rgba(0,200,255,0.5),
    0 0 60px rgba(0,200,255,0.2);
  transform: rotate(-2deg);
  display: inline-block;
  animation: sigGlowCyan 4s ease-in-out infinite;
}
@keyframes sigGlowCyan {
  0%, 100% { text-shadow: 0 0 20px rgba(0,200,255,0.5), 0 0 60px rgba(0,200,255,0.2); }
  50% { text-shadow: 0 0 30px rgba(0,200,255,0.8), 0 0 80px rgba(0,200,255,0.4), 0 0 120px rgba(0,200,255,0.15); }
}
.sig-bent:hover {
  filter: drop-shadow(0 0 16px rgba(0,200,255,0.9));
  transform: rotate(-2deg) scale(1.05);
}
.sig-rad {
  background: linear-gradient(135deg, #ff6a00, #ffb347);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 12px rgba(255,106,0,0.5));
  transform: rotate(1.5deg);
  display: inline-block;
  animation: sigGlowOrange 4s ease-in-out infinite 1s;
}
@keyframes sigGlowOrange {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(255,106,0,0.5)); }
  50% { filter: drop-shadow(0 0 24px rgba(255,106,0,0.8)) drop-shadow(0 0 60px rgba(255,179,71,0.3)); }
}
.sig-rad:hover {
  filter: drop-shadow(0 0 20px rgba(255,106,0,0.9));
  transform: rotate(1.5deg) scale(1.05);
}
.sig-amp {
  font-family: 'Permanent Marker', cursive;
  font-size: 1.4rem;
  color: var(--dim);
  font-weight: 400;
}

.hero-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(4.5rem, 12vw, 9rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.ht-bent {
  color: #fff;
  text-shadow: 0 0 40px rgba(255,255,255,0.2), 0 0 80px rgba(0,200,255,0.15);
  animation: title-flicker 7s infinite;
}

.ht-rad {
  background: linear-gradient(135deg, #ff6a00, #ffb347);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 20px rgba(255,106,0,0.5));
}

@keyframes title-flicker {
  0%,94%,100% { opacity:1; }
  95% { opacity:0.75; }
  96% { opacity:1; }
  97% { opacity:0.85; }
}

.hero-sub {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.5em;
  color: var(--accent);
  margin-bottom: 10px;
}

.hero-desc {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.hero-tags {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.hero-tags span {
  background: rgba(0,200,255,0.05);
  border: 1px solid rgba(0,200,255,0.18);
  border-radius: 2px;
  padding: 5px 14px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.72rem;
  color: var(--dim);
  letter-spacing: 0.1em;
  transition: all 0.2s;
}
.hero-tags span:hover { border-color: var(--accent); color: var(--accent); background: rgba(0,200,255,0.1); }

.hero-hook {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  max-width: 520px;
  line-height: 1.6;
  text-align: center;
  margin-top: 18px;
  opacity: 0.85;
}

/* hero exit/enter transitions */
.hero-exit {
  animation: hero-fade-out 0.6s ease forwards;
}
.hero-enter {
  animation: hero-fade-in 0.6s ease forwards;
}
@keyframes hero-fade-out {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.04); }
}
@keyframes hero-fade-in {
  0%   { opacity: 0; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

/* scroll hint */
.hero-scroll-hint {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--dim);
  animation: fade-bob 2s ease-in-out infinite;
}
.scroll-arrow {
  width: 12px; height: 12px;
  border-right: 2px solid var(--dim);
  border-bottom: 2px solid var(--dim);
  transform: rotate(45deg);
}
@keyframes fade-bob {
  0%,100% { opacity:0.4; transform:translateX(-50%) translateY(0); }
  50%      { opacity:0.8; transform:translateX(-50%) translateY(6px); }
}

/* ── HERO STATS BAR ── */
.hero-stats-bar {
  display: flex;
  gap: 40px;
  justify-content: center;
  margin-bottom: 30px;
}
.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.hero-stat-num {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--olive-bright);
  letter-spacing: 0.05em;
}
.hero-stat-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  color: var(--dim);
  opacity: 0.7;
}
@media (max-width: 600px) {
  .hero-stats-bar { gap: 24px; }
  .hero-stat-num { font-size: 1.2rem; }
}

/* ── HERO PILLARS ── */
.hero-pillars {
  display: flex; gap: 20px; flex-wrap: wrap;
  justify-content: center;
  width: 100%; max-width: 860px;
  padding: 0 16px;
}
.hero-pillar {
  flex: 1; min-width: 220px; max-width: 260px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: rgba(0,200,255,0.03);
  border: 1px solid rgba(0,200,255,0.1);
  border-radius: 4px;
  padding: 28px 20px;
  text-align: center;
  transition: border-color 0.2s, background 0.2s;
}
.hero-pillar:hover {
  border-color: rgba(0,200,255,0.3);
  background: rgba(0,200,255,0.06);
}
.pillar-icon { font-size: 1.4rem; color: var(--accent); opacity: 0.7; }
.pillar-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--accent);
}
.pillar-body {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dim);
  line-height: 1.55;
  letter-spacing: 0.02em;
}

/* ── HERO TRUST BADGE — privacy promise ── */
.hero-trust-badge {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 600px;
  margin: 40px auto 10px;
  padding: 18px 28px;
  background: linear-gradient(135deg, rgba(0,200,255,0.06), rgba(74,120,60,0.08));
  border: 1px solid rgba(0,200,255,0.15);
  border-radius: 10px;
  text-align: left;
}
.trust-icon {
  font-size: 2rem;
  filter: drop-shadow(0 0 10px rgba(0,200,255,0.4));
  flex-shrink: 0;
}
.trust-content { display: flex; flex-direction: column; gap: 4px; }
.trust-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--olive-bright);
}
.trust-body {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--dim);
  line-height: 1.5;
}

/* ── HERO PERKS — unlock showcase ── */
.hero-perks {
  width: 100%; max-width: 900px;
  margin: 50px auto 30px;
  padding: 0 16px;
  text-align: center;
}
.perks-header {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin-bottom: 28px;
}
.perks-lock { font-size: 2rem; filter: drop-shadow(0 0 12px var(--olive-bright)); }
.perks-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.18em;
  color: var(--olive-bright);
}
.perks-sub {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem;
  color: var(--dim);
  font-weight: 600;
}
.perks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.perk-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px 12px 14px;
  background: rgba(107,138,61,0.06);
  border: 1px solid rgba(107,138,61,0.18);
  border-radius: 10px;
  transition: border-color 0.2s, transform 0.2s, background 0.2s;
}
.perk-card:hover {
  border-color: var(--olive-bright);
  background: rgba(107,138,61,0.12);
  transform: translateY(-2px);
}
.perk-icon { font-size: 1.5rem; }
.perk-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  color: var(--fg);
}
.perk-desc {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.8rem;
  color: var(--dim);
  font-weight: 600;
}
.perks-cta { margin-top: 28px; }
.perks-cta .btn-enter-ghost {
  border-color: var(--olive-bright);
  color: var(--olive-bright);
}
.perks-cta .btn-enter-ghost:hover {
  background: var(--olive-bright);
  color: #000;
}
.perks-reassurance {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  color: var(--dim);
  margin-top: 14px;
  opacity: 0.7;
}

/* ── FEED GUEST NUDGE — inline card for non-logged-in users ── */
.feed-guest-nudge {
  background: linear-gradient(135deg, rgba(107,138,61,0.08), rgba(0,200,255,0.05));
  border: 1px solid rgba(107,138,61,0.25);
  border-radius: 12px;
  padding: 24px 20px;
  text-align: center;
  margin: 8px 0;
}
.feed-guest-nudge .nudge-headline {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--olive-bright);
  margin-bottom: 6px;
}
.feed-guest-nudge .nudge-body {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.95rem;
  color: var(--dim);
  font-weight: 600;
  margin-bottom: 14px;
  line-height: 1.5;
}
.feed-guest-nudge .nudge-perks {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-bottom: 16px;
}
.feed-guest-nudge .nudge-perk {
  font-size: 0.7rem;
  padding: 4px 10px;
  background: rgba(107,138,61,0.12);
  border: 1px solid rgba(107,138,61,0.2);
  border-radius: 20px;
  color: var(--fg);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
}
.feed-guest-nudge .btn-enter-ghost {
  border-color: var(--olive-bright);
  color: var(--olive-bright);
  font-size: 0.85rem;
  padding: 10px 28px;
}
.feed-guest-nudge .btn-enter-ghost:hover {
  background: var(--olive-bright);
  color: #000;
}

@media (max-width: 600px) {
  .perks-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .perk-card { padding: 14px 8px 10px; }
  .perk-icon { font-size: 1.2rem; }
  .perk-label { font-size: 0.5rem; }
  .perk-desc { font-size: 0.7rem; }
  .perks-title { font-size: 0.8rem; }
}

/* ── GUEST NUDGE GLOW ── */
.feed-guest-nudge { position: relative; overflow: hidden; }
.nudge-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(107,138,61,0.15) 0%, transparent 60%);
  animation: nudge-glow-pulse 3s ease-in-out infinite;
}
@keyframes nudge-glow-pulse {
  0%,100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ── GUEST WALL — deeper feed CTA ── */
.guest-wall {
  position: relative;
  margin: 16px 0;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(8,11,16,0.3) 0%, rgba(8,11,16,0.95) 100%);
  border: 1px solid rgba(0,200,255,0.15);
}
.gw-blur {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(8,11,16,0.4) 20%,
    rgba(8,11,16,0.85) 50%,
    rgba(8,11,16,0.98) 100%);
  z-index: 1;
}
.gw-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  padding: 48px 24px 40px;
  text-align: center;
}
.gw-icon { font-size: 2.5rem; margin-bottom: 12px; filter: drop-shadow(0 0 16px var(--accent)); }
.gw-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 8px;
}
.gw-subtitle {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem;
  color: var(--dim);
  font-weight: 600;
  margin-bottom: 24px;
}
.gw-features {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  width: 100%; max-width: 520px;
  margin-bottom: 28px;
}
.gw-feat {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: rgba(0,200,255,0.04);
  border: 1px solid rgba(0,200,255,0.1);
  border-radius: 8px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  transition: border-color 0.2s, background 0.2s;
}
.gw-feat:hover { border-color: rgba(0,200,255,0.3); background: rgba(0,200,255,0.08); }
.gw-feat-icon { font-size: 1.2rem; }
.gw-cta {
  font-size: 0.85rem !important;
  padding: 14px 32px !important;
}
.gw-note {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: var(--dim);
  margin-top: 12px;
}

/* ── GUEST FLOATING BANNER ── */
.guest-float-banner {
  position: fixed;
  bottom: -80px;
  left: 0; right: 0;
  z-index: 190;
  transition: bottom 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.guest-float-banner.visible {
  bottom: 0;
  pointer-events: all;
}
.gfb-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 16px;
  padding: 12px 24px;
  background: linear-gradient(135deg, rgba(8,11,16,0.96), rgba(22,30,40,0.98));
  border-top: 1px solid rgba(0,200,255,0.2);
  backdrop-filter: blur(12px);
}
.gfb-text {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 600;
}
.gfb-text strong { color: var(--olive-bright); }
.gfb-btn {
  background: linear-gradient(135deg, #004d88, #00c8ff);
  border: none; border-radius: 3px;
  padding: 8px 20px;
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.gfb-btn:hover { box-shadow: var(--glow); transform: translateY(-1px); }
.gfb-close {
  background: none; border: none;
  color: var(--dim); font-size: 1rem;
  cursor: pointer; padding: 4px 8px;
  transition: color 0.2s;
}
.gfb-close:hover { color: var(--text); }

/* ── GATE MODAL PERKS MINI ── */
.gate-perks-mini {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-top: 14px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--olive-bright);
  opacity: 0.8;
}

/* ── PERK CARD ANIMATIONS ── */
.perk-card {
  animation: perk-fade-in 0.5s ease both;
}
.perk-card:nth-child(1)  { animation-delay: 0.05s; }
.perk-card:nth-child(2)  { animation-delay: 0.1s; }
.perk-card:nth-child(3)  { animation-delay: 0.15s; }
.perk-card:nth-child(4)  { animation-delay: 0.2s; }
.perk-card:nth-child(5)  { animation-delay: 0.25s; }
.perk-card:nth-child(6)  { animation-delay: 0.3s; }
.perk-card:nth-child(7)  { animation-delay: 0.35s; }
.perk-card:nth-child(8)  { animation-delay: 0.4s; }
.perk-card:nth-child(9)  { animation-delay: 0.45s; }
.perk-card:nth-child(10) { animation-delay: 0.5s; }
.perk-card:nth-child(11) { animation-delay: 0.55s; }
.perk-card:nth-child(12) { animation-delay: 0.6s; }
@keyframes perk-fade-in {
  from { opacity: 0; transform: translateY(16px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 600px) {
  .gfb-inner { flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
  .gfb-text { font-size: 0.78rem; text-align: center; }
  .gw-features { grid-template-columns: 1fr; }
  .guest-wall { margin: 12px 0; }
  .gw-content { padding: 32px 16px 28px; }
}

/* ── HERO FOOTER ── */
.hero-footer {
  position: relative; z-index: 2;
  background: linear-gradient(transparent, rgba(8,11,16,0.98));
  border-top: 1px solid rgba(0,200,255,0.12);
  padding: 70px 24px 56px;
  text-align: center;
  margin-top: auto;
  width: 100%;
}
/* hide footer once zone is entered */
.hero-footer.hidden { display: none; }
.hero-footer-inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex; flex-direction: column; gap: 32px;
}
.hero-footer-story {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  text-align: center;
}
.hero-footer-icon {
  font-size: 1.6rem;
  color: var(--accent);
  opacity: 0.5;
}

/* ── HERO WELCOME PANEL — logged-in returning users ── */
.hero-welcome-panel {
  display: flex; flex-direction: column;
  align-items: center; gap: 28px;
  text-align: center;
  max-width: 560px;
  width: 100%;
  z-index: 2;
  position: relative;
}
.hw-greeting {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(0.8rem, 2vw, 1rem);
  letter-spacing: 0.15em;
  color: var(--text);
  opacity: 0.9;
}
.hw-greeting strong {
  color: var(--accent);
}
.hw-announcement {
  display: flex; flex-direction: column; gap: 10px;
  width: 100%;
}
.hw-announce-card {
  background: rgba(0,200,255,0.04);
  border: 1px solid rgba(0,200,255,0.12);
  border-left: 2px solid var(--accent);
  border-radius: 3px;
  padding: 14px 18px;
  text-align: left;
}
.hw-announce-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.hw-announce-text {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.5;
  opacity: 0.85;
}
.hw-announce-time {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.5rem;
  color: var(--dim);
  margin-top: 6px;
  letter-spacing: 0.08em;
}
.hero-footer-story p {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  font-weight: 600;
  color: var(--text);
  line-height: 1.8;
  letter-spacing: 0.04em;
  max-width: 640px;
}
.hero-footer-story p em {
  font-style: normal;
  color: var(--accent);
}
.hero-footer-copy {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  color: rgba(74,96,112,0.5);
  text-transform: uppercase;
  border-top: 1px solid rgba(0,200,255,0.06);
  padding-top: 22px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.footer-legal-links {
  display: flex; gap: 8px; align-items: center;
  text-transform: none; letter-spacing: 0.1em;
}
.footer-legal-links .link-btn {
  color: rgba(0,200,255,0.4);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
}
.footer-legal-links .link-btn:hover { color: var(--accent); }

/* ── Legal pages ── */
.legal-content {
  max-width: 700px;
  margin: 0 auto;
  padding: 20px 16px 60px;
  line-height: 1.8;
  font-size: 0.95rem;
  color: var(--text);
}
.legal-content h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-top: 24px;
  margin-bottom: 8px;
}
.legal-content p { margin-bottom: 10px; }
.legal-content strong { color: var(--accent); }
.legal-updated {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.65rem;
  color: var(--dim);
  letter-spacing: 0.15em;
  margin-bottom: 16px;
}
.legal-footer {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  color: var(--dim);
  font-size: 0.85rem;
}
.legal-list {
  margin: 8px 0 12px 20px;
  padding: 0;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text);
}
.legal-list li { margin-bottom: 4px; }

/* ── Cookie consent banner ── */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  background: var(--panel);
  border-top: 1px solid var(--border);
  padding: 14px 20px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
}
.cookie-banner-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.cookie-text {
  font-size: 0.82rem;
  color: var(--dim);
  line-height: 1.5;
  margin: 0;
}
.cookie-text .link-btn { font-size: 0.82rem; }
.cookie-accept-btn {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  padding: 8px 20px;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
.cookie-accept-btn:hover { background: rgba(0,200,255,0.1); }
@media (max-width: 600px) {
  .cookie-banner-inner { flex-direction: column; text-align: center; gap: 10px; }
  .cookie-accept-btn { width: 100%; }
}

/* ── Online status dots ── */
.online-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #39ff14;
  box-shadow: 0 0 6px #39ff14;
  vertical-align: middle;
  margin-right: 4px;
}
.user-online-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--dim);
  margin-left: auto;
  flex-shrink: 0;
  transition: background 0.3s;
}
.user-online-dot.active {
  background: #39ff14;
  box-shadow: 0 0 6px #39ff14;
}
.user-item { position: relative; }

/* ── Share button on posts ── */
.post-share {
  background: none; border: none; cursor: pointer;
  font-size: 0.85rem; opacity: 0.5; transition: opacity 0.2s;
  padding: 2px 6px;
}
.post-share:hover { opacity: 1; }

/* ── Squad tag on posts ── */
.post-squad-tag {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.55rem;
  color: var(--accent);
  opacity: 0.7;
  letter-spacing: 0.05em;
  margin-left: 4px;
}

/* ── Online count sidebar ── */
.sidebar-online-count {
  padding: 10px 14px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.8rem;
  color: #39ff14;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sidebar-online-count .online-dot {
  animation: onlinePulse 2s ease-in-out infinite;
}

/* ── Sidebar video badge ── */
.sb-vid-badge {
  position: absolute;
  bottom: 4px; right: 4px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.45rem;
  color: rgba(0,200,255,0.8);
  background: rgba(0,0,0,0.6);
  padding: 1px 4px;
  border-radius: 2px;
  letter-spacing: 0.08em;
}
.sb-clip-wrap { position: relative; }

/* ── Follow list overlay ── */
.follow-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.2s;
}
.follow-list-item:hover { background: rgba(0,200,255,0.08); }
.follow-list-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
}
.follow-list-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  color: var(--text);
  letter-spacing: 0.05em;
}

/* ══════════════════════════════════════════════════════════════════
   WAR-ROOM APP BACKGROUND
══════════════════════════════════════════════════════════════════ */
.warroom-bg {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.warroom-bg.active { opacity: 1; }

/* Drifting tactical grid — slightly different scale/color from body grid */
.wr-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,200,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,255,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  animation: wr-grid-drift 30s linear infinite;
}
@keyframes wr-grid-drift {
  from { background-position: 0 0; }
  to   { background-position: 80px 80px; }
}

/* Slow horizontal scan beam */
.wr-scan {
  position: absolute; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,200,255,0.0) 20%,
    rgba(0,200,255,0.18) 50%,
    rgba(0,200,255,0.0) 80%,
    transparent 100%
  );
  animation: wr-scan-sweep 12s ease-in-out infinite;
  opacity: 0.6;
}
@keyframes wr-scan-sweep {
  0%   { top: 0%;   opacity: 0; }
  5%   { opacity: 0.6; }
  95%  { opacity: 0.3; }
  100% { top: 100%; opacity: 0; }
}

/* Side ambient glow columns */
.wr-glow-left {
  position: absolute; top: 0; left: 0; bottom: 0; width: 280px;
  background: linear-gradient(90deg, rgba(0,200,255,0.04) 0%, transparent 100%);
  animation: wr-side-pulse 8s ease-in-out infinite;
}
.wr-glow-right {
  position: absolute; top: 0; right: 0; bottom: 0; width: 280px;
  background: linear-gradient(270deg, rgba(255,106,0,0.03) 0%, transparent 100%);
  animation: wr-side-pulse 8s ease-in-out infinite 4s;
}
@keyframes wr-side-pulse {
  0%,100% { opacity: 0.5; }
  50%      { opacity: 1; }
}



/* Bottom scrolling ticker */
.wr-ticker {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 26px;
  background: rgba(8,11,16,0.92);
  border-top: 1px solid rgba(0,200,255,0.1);
  overflow: hidden;
  z-index: 190;
  display: flex; align-items: center;
}
.wr-ticker-inner {
  display: inline-block;
  white-space: nowrap;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  color: rgba(0,200,255,0.35);
  animation: ticker-scroll 60s linear infinite;
  padding-left: 100%;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ══════════════════════════════════════════════════════════════════
   MAIN CONTENT / PAGES
══════════════════════════════════════════════════════════════════ */
.main-content {
  position: relative; z-index: 1;
  max-width: 680px;
  margin: 0 auto;
  padding: 72px 0 100px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s;
}
.main-content.site-visible {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.page { display: none; }
.page.active { display: block; animation: fadeUp 0.3s ease; }
#page-upload, #page-messages, #page-profile { padding: 0 20px; }

@keyframes fadeUp   { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }

.section-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--dim);
  text-transform: uppercase;
  padding: 20px 0 14px;
  border-bottom: 1px solid rgba(30,45,61,0.4);
  margin-bottom: 20px;
  display: flex; align-items: center; gap: 10px;
}
.section-title::before {
  content: '';
  width: 2px; height: 12px;
  background: var(--olive-bright);
  border-radius: 1px;
  flex-shrink: 0;
}

/* ── FEED BANNER ── */
.feed-banner {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 0 20px;
  border-bottom: 1px solid rgba(30,45,61,0.4);
  margin-bottom: 4px;
}
.feed-banner-logo {
  width: 80px; height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(0,200,255,0.4));
  animation: logo-pulse 4s ease-in-out infinite;
  flex-shrink: 0;
}
.feed-banner-text {
  display: flex; flex-direction: column; gap: 6px;
}
.feed-banner-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.01em;
}
.fb-bent { color: #fff; text-shadow: 0 0 20px rgba(107,138,61,0.3); }
.fb-rad  {
  background: linear-gradient(135deg, #ff6a00, #ffb347);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(255,106,0,0.4));
}
.feed-banner-phrases {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: var(--dim);
}
.fb-sep { color: var(--olive); opacity: 0.5; }

/* ── FEED ── */
.feed-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.feed-header .section-title {
  padding: 0; border: none; margin: 0;
}

/* ── Category filter bar ── */
.feed-filter-bar {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.feed-filter {
  background: transparent;
  border: 1px solid rgba(30,45,61,0.5);
  border-radius: 2px;
  padding: 5px 12px;
  color: var(--dim);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
}
.feed-filter:hover { border-color: var(--olive-bright); color: var(--olive-bright); }
.feed-filter.active {
  border-color: var(--olive-bright);
  color: var(--olive-bright);
  background: rgba(0,200,255,0.06);
}

/* ── Feed Tabs (swipeable) ── */
.feed-tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--border);
  margin-bottom: 0; position: sticky; top: 72px; z-index: 10;
  background: var(--bg);
}
.feed-tab {
  flex: 1; padding: 10px 0; text-align: center;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.65rem; letter-spacing: 0.12em;
  color: var(--dim); background: none; border: none;
  cursor: pointer; transition: color 0.2s, border-color 0.2s;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.feed-tab:hover { color: var(--text); }
.feed-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.feed-panels-wrap {
  position: relative;
}
.feed-panel {
  display: none;
}
.feed-panel.active {
  display: block;
}

/* ── Panel Section Headers — subtle war-room dividers ── */
.panel-section-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 0 14px;
  margin: 4px 0 12px;
}
.psh-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,200,255,0.15), rgba(107,138,61,0.12), transparent);
}
.psh-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--dim);
  white-space: nowrap;
  text-transform: uppercase;
  opacity: 0.8;
}

/* live dot */
.live-dot {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: var(--green);
}
.live-dot::before {
  content: '';
  width: 7px; height: 7px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--green);
  animation: blink 1.2s infinite;
}
.feed-post-count {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.6rem;
  color: var(--dim);
  letter-spacing: 0.1em;
}

.btn-upload-inline {
  background: rgba(0,200,255,0.08);
  border: 1px solid rgba(0,200,255,0.25);
  border-radius: 3px;
  padding: 8px 18px;
  color: var(--accent);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-upload-inline:hover { background: rgba(0,200,255,0.12); border-color: var(--accent); color: #fff; }

.feed { display: flex; flex-direction: column; gap: 0; }

.post-card {
  background: var(--panel);
  border: none;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  transition: background 0.25s, border-left 0.25s;
  border-left: 2px solid transparent;
  padding: 0;
}
.post-card:first-child { border-top: 1px solid var(--border); }
.post-card:hover { background: rgba(107,138,61,0.03); border-left-color: var(--olive); }

/* ── Post entrance animation ── */
.post-enter {
  animation: post-slide-in 0.4s ease both;
}
@keyframes post-slide-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Skeleton loading cards ── */
.skeleton-card {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  padding: 0;
  overflow: hidden;
}
.skeleton-card:first-child { border-top: 1px solid var(--border); }
.sk-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px 10px;
}
.sk-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--bg3);
}
.sk-lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.sk-line {
  height: 10px;
  background: var(--bg3);
  border-radius: 4px;
  width: 100%;
}
.sk-line-short { width: 40%; }
.sk-line-tiny  { width: 25%; height: 8px; }
.sk-line-med   { width: 65%; }
.sk-media {
  width: 100%;
  height: 200px;
  background: var(--bg3);
}
.sk-body { padding: 12px 20px 16px; display: flex; flex-direction: column; gap: 8px; }
.sk-pulse {
  animation: sk-shimmer 1.5s ease-in-out infinite;
}
@keyframes sk-shimmer {
  0%   { opacity: 0.4; }
  50%  { opacity: 0.7; }
  100% { opacity: 0.4; }
}

/* ── Floating emoji (double-tap react) ── */
.floating-emoji {
  position: fixed;
  font-size: 2.5rem;
  pointer-events: none;
  z-index: 9999;
  animation: float-up 0.8s ease-out forwards;
  filter: drop-shadow(0 0 8px rgba(255,106,0,0.6));
}
/* ── Floating reaction on post card ── */
.floating-reaction {
  position: absolute;
  bottom: 60px;
  font-size: 2rem;
  pointer-events: none;
  z-index: 10;
  animation: reaction-float 1.2s ease-out forwards;
  filter: drop-shadow(0 0 6px rgba(255,106,0,0.5));
}
@keyframes reaction-float {
  0%   { opacity: 1; transform: translateY(0) scale(0.5); }
  40%  { opacity: 1; transform: translateY(-40px) scale(1.4); }
  100% { opacity: 0; transform: translateY(-100px) scale(0.6); }
}
@keyframes float-up {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(0.5); }
  50%  { opacity: 1; transform: translate(-50%, -120%) scale(1.3); }
  100% { opacity: 0; transform: translate(-50%, -200%) scale(0.8); }
}

/* ── New posts banner ── */
.new-posts-banner {
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(0,200,255,0.08), rgba(107,138,61,0.08));
  border: 1px solid rgba(0,200,255,0.2);
  border-radius: 8px;
  margin: 8px 0;
  animation: npb-slide-in 0.3s ease;
}
.new-posts-banner span {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
}
.new-posts-banner button {
  background: rgba(0,200,255,0.12);
  border: 1px solid rgba(0,200,255,0.3);
  border-radius: 3px;
  padding: 5px 14px;
  color: var(--accent);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.2s;
}
.new-posts-banner button:hover { background: rgba(0,200,255,0.2); }
.npb-close {
  background: none !important;
  border: none !important;
  color: var(--dim) !important;
  font-size: 1rem !important;
  padding: 2px 6px !important;
}
@keyframes npb-slide-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Optimistic message sending state ── */
.msg-sending {
  opacity: 0.6;
}
/* ── Read receipts ── */
.msg-read-status {
  margin-left: 6px;
  font-size: 0.55rem;
  letter-spacing: -1px;
  opacity: 0.5;
}
.msg.sent .msg-read-status { color: var(--accent); opacity: 0.8; }
/* ── User online status in DM list ── */
.user-item-status {
  font-size: 0.62rem;
  color: var(--dim);
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: 0.03em;
}
.user-item-status.user-item-online {
  color: var(--green);
  text-shadow: 0 0 6px rgba(57,255,20,0.3);
}
/* ── Online dot pulse ── */
.user-online-dot.active {
  animation: onlinePulse 2s ease-in-out infinite;
}
@keyframes onlinePulse {
  0%, 100% { box-shadow: 0 0 6px #39ff14; }
  50% { box-shadow: 0 0 12px #39ff14, 0 0 20px rgba(57,255,20,0.3); }
}

.post-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px 10px;
}
.post-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(107,138,61,0.3);
  object-fit: cover; flex-shrink: 0;
  background: var(--bg);
}
.post-meta { flex: 1; }
.post-username {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.78rem;
  color: var(--accent);
  letter-spacing: 0.05em;
}
.post-username-link {
  cursor: pointer;
  transition: color 0.2s;
}
.post-username-link:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.post-avatar-link { cursor: pointer; transition: filter 0.2s; }
.post-avatar-link:hover { filter: brightness(1.2); }
.guest-badge {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.55rem;
  color: var(--accent2);
  border: 1px solid rgba(255,106,0,0.4);
  border-radius: 2px;
  padding: 1px 5px;
  letter-spacing: 0.1em;
  vertical-align: middle;
  margin-left: 4px;
}
.post-time {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.62rem;
  color: var(--dim);
  margin-top: 2px;
}
.post-delete {
  background: none; border: none;
  color: var(--dim); cursor: pointer;
  font-size: 0.95rem; padding: 4px 8px;
  border-radius: 3px; transition: color 0.2s;
}
.post-delete:hover { color: var(--red); }

.post-media { width: 100%; display: block; max-height: 420px; object-fit: contain; background: #000; }

.post-caption {
  padding: 10px 20px 6px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
}

.post-tag {
  padding: 0 20px 8px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--accent2);
  opacity: 0.8;
}

/* reactions */
.post-reactions {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 20px;
  flex-wrap: wrap;
}

/* collapsed + button */
.reaction-add-btn {
  background: transparent;
  border: 1px solid rgba(30,45,61,0.6);
  border-radius: 3px;
  padding: 4px 10px;
  color: var(--dim);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  display: flex; align-items: center; gap: 5px;
  transition: all 0.2s;
  flex-shrink: 0;
}
.reaction-add-btn:hover { border-color: var(--olive-bright); color: var(--olive-bright); }
.reaction-add-label { font-size: 0.55rem; }

.reaction-picker { display: flex; gap: 2px; flex-wrap: wrap; }
.emoji-btn {
  background: none; border: none;
  font-size: 1.1rem; cursor: pointer;
  padding: 4px 5px; border-radius: 4px;
  transition: transform 0.15s;
  opacity: 0.5;
}
.emoji-btn:hover { transform: scale(1.25); opacity: 1; }
.reaction-btn {
  background: transparent;
  border: 1px solid rgba(30,45,61,0.6);
  border-radius: 3px;
  padding: 3px 10px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: all 0.2s;
  display: flex; align-items: center; gap: 4px;
  color: var(--text);
}
.reaction-btn:hover { border-color: var(--accent); }
.reaction-btn.active { border-color: var(--accent); background: rgba(0,200,255,0.06); }

/* comments */
.post-comments { padding: 4px 20px 14px; }
.comments-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.comments-toggle {
  background: none;
  border: none;
  color: var(--dim);
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.2s;
  letter-spacing: 0.02em;
}
.comments-toggle:hover { color: var(--accent); }
.comment { display: flex; gap: 10px; animation: fadeIn 0.2s ease; }
.comment-avatar { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(30,45,61,0.5); object-fit: cover; flex-shrink: 0; background: var(--bg); margin-top: 2px; }
.comment-body { flex: 1; }
.comment-user {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 2px;
  display: inline;
  margin-right: 8px;
  letter-spacing: 0.03em;
}
.comment-text { font-size: 0.88rem; line-height: 1.4; display: inline; color: var(--text); opacity: 0.9; }

.comment-input-row {
  display: flex; gap: 10px; align-items: center;
  padding-top: 8px;
  border-top: 1px solid rgba(30,45,61,0.6);
}
.comment-input {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 8px 4px;
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
}
.comment-input:focus { border-bottom-color: var(--olive-bright); }
.comment-input::placeholder { color: var(--dim); }
.comment-input.guest-input { cursor: pointer; }

.btn-sm {
  background: none;
  border: none;
  color: var(--accent);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  padding: 4px 0;
}
.btn-sm:hover { color: #fff; text-shadow: 0 0 10px var(--accent); }

/* ══════════════════════════════════════════════════════════════════
   UPLOAD — DROP ZONE ARENA
══════════════════════════════════════════════════════════════════ */
#page-upload {
  padding: 0;
  min-height: calc(100vh - 72px);
}

/* ── Arena wrapper ── */
.dropzone-arena {
  position: relative;
  min-height: calc(100vh - 72px);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  overflow: hidden;
  cursor: pointer;
}

/* animated grid overlay */
.dz-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0,200,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,255,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: dz-grid-drift 20s linear infinite;
}
@keyframes dz-grid-drift {
  from { background-position: 0 0; }
  to   { background-position: 60px 60px; }
}

/* scanning line */
.dz-scan-line {
  position: absolute; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.5;
  animation: dz-scan 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes dz-scan {
  0%   { top: 0%; opacity: 0; }
  5%   { opacity: 0.6; }
  95%  { opacity: 0.4; }
  100% { top: 100%; opacity: 0; }
}

/* corner brackets — removed */
.dropzone-arena.drag-active .dz-scan-line { animation-duration: 1s; opacity: 1; }
.dropzone-arena.drag-active .dz-grid {
  background-image:
    linear-gradient(rgba(0,200,255,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,255,0.1) 1px, transparent 1px);
}

/* dropzone back button */
.dz-back-btn {
  position: absolute; top: 20px; left: 20px; z-index: 4;
  background: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 8px 16px;
  color: var(--dim);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.2s;
}
.dz-back-btn:hover { border-color: var(--accent); color: var(--accent); }

/* inner content */
.dz-inner {
  position: relative; z-index: 3;
  display: flex; flex-direction: column;
  align-items: center; gap: 24px;
  text-align: center;
  padding: 60px 20px;
  user-select: none;
  width: 100%; max-width: 860px;
}

/* ── Big action buttons ── */
.dz-action-row {
  display: flex; gap: 20px; flex-wrap: wrap;
  justify-content: center; width: 100%;
}
.dz-action-btn {
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
  background: rgba(13,17,24,0.85);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 32px 28px;
  cursor: pointer;
  transition: all 0.25s;
  flex: 1; min-width: 180px; max-width: 240px;
  position: relative; overflow: hidden;
}
.dz-action-btn::before {
  content: ''; position: absolute; inset: 0;
  opacity: 0; transition: opacity 0.25s;
}
.dz-action-btn:hover { transform: translateY(-4px); }

.dz-action-video { border-color: rgba(0,200,255,0.25); }
.dz-action-video::before { background: radial-gradient(ellipse at top, rgba(0,200,255,0.08), transparent 70%); }
.dz-action-video:hover { border-color: var(--accent); box-shadow: 0 0 30px rgba(0,200,255,0.2), 0 8px 32px rgba(0,0,0,0.4); }
.dz-action-video:hover::before { opacity: 1; }

.dz-action-image { border-color: rgba(57,255,20,0.2); }
.dz-action-image::before { background: radial-gradient(ellipse at top, rgba(57,255,20,0.07), transparent 70%); }
.dz-action-image:hover { border-color: var(--green); box-shadow: 0 0 30px rgba(57,255,20,0.15), 0 8px 32px rgba(0,0,0,0.4); }
.dz-action-image:hover::before { opacity: 1; }

.dz-action-text { border-color: rgba(255,106,0,0.2); }
.dz-action-text::before { background: radial-gradient(ellipse at top, rgba(255,106,0,0.08), transparent 70%); }
.dz-action-text:hover { border-color: var(--accent2); box-shadow: 0 0 30px rgba(255,106,0,0.2), 0 8px 32px rgba(0,0,0,0.4); }
.dz-action-text:hover::before { opacity: 1; }

.dz-action-icon { font-size: 2.8rem; line-height: 1; transition: transform 0.2s; }
.dz-action-btn:hover .dz-action-icon { transform: scale(1.15); }

.dz-action-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.78rem; font-weight: 900;
  letter-spacing: 0.1em; color: #fff;
}
.dz-action-video:hover .dz-action-label { color: var(--accent); }
.dz-action-image:hover .dz-action-label { color: var(--green); }
.dz-action-text:hover .dz-action-label  { color: var(--accent2); }

.dz-action-sub {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.58rem; letter-spacing: 0.1em; color: var(--dim);
}

/* ── Mission statement + quotes ── */
.dz-mission {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  max-width: 640px; width: 100%;
  padding-bottom: 8px;
}
.dz-mission-quote {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(0.7rem, 2vw, 0.88rem);
  letter-spacing: 0.06em;
  color: rgba(0,200,255,0.7);
  text-align: center;
  display: flex; flex-direction: column; gap: 5px;
  min-height: 48px;
  transition: opacity 0.4s ease;
}
.dz-quote-text {
  font-style: italic;
  line-height: 1.5;
}
.dz-quote-attr {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  color: var(--accent2);
  opacity: 0.8;
}
.dz-mission-statement {
  display: flex; flex-direction: column; gap: 5px;
  align-items: center; text-align: center;
  padding: 12px 20px;
  border: 1px solid rgba(0,200,255,0.1);
  border-radius: 4px;
  background: rgba(0,200,255,0.02);
  max-width: 560px;
}
.dz-ms-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  color: var(--accent);
}
.dz-ms-body {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--dim);
  line-height: 1.5;
  letter-spacing: 0.03em;
}

.dz-or {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.6rem; letter-spacing: 0.15em;
  color: rgba(74,96,112,0.5);
}

.dz-limit {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.6rem; letter-spacing: 0.15em;
  color: rgba(74,96,112,0.6);
}
.dz-copyright-notice {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.75rem;
  color: rgba(200,160,80,0.7);
  max-width: 480px;
  margin: 12px auto 0;
  text-align: center;
  line-height: 1.5;
}
.dz-copyright-notice .link-btn { font-size: 0.75rem; color: var(--accent); }
.staging-trust-line {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: rgba(74,120,60,0.6);
  text-align: center;
  margin-top: 10px;
}

/* text post placeholder */
.staging-text-placeholder {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px; height: 100%;
  background: var(--bg2);
}
.stp-icon { font-size: 4rem; }
.stp-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.8rem; letter-spacing: 0.2em;
  color: var(--accent2);
}

/* text post body */
.post-text-body {
  padding: 20px 20px 14px;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  border-left: 3px solid var(--accent2);
  margin: 0 20px 4px;
  background: rgba(255,106,0,0.04);
  border-radius: 0 4px 4px 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* emoji picker */
.emoji-picker-row {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 8px;
}
.emoji-picker-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.55rem; letter-spacing: 0.18em; color: var(--dim);
}
.emoji-picker-grid {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.ep-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px 7px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1;
}
.ep-btn:hover { transform: scale(1.25); border-color: var(--accent); background: rgba(0,200,255,0.08); }

/* drop overlay flash */
.dz-drop-overlay {
  position: absolute; inset: 0; z-index: 10;
  background: rgba(0,200,255,0.06);
  display: none;
  align-items: center; justify-content: center;
  pointer-events: none;
}
.dropzone-arena.drag-active .dz-drop-overlay { display: flex; }
.dz-drop-text {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 900;
  color: var(--accent);
  letter-spacing: 0.15em;
  text-shadow: 0 0 60px rgba(0,200,255,0.9);
  animation: dz-drop-pulse 0.6s ease-in-out infinite alternate;
}
@keyframes dz-drop-pulse {
  from { opacity: 0.7; transform: scale(0.97); }
  to   { opacity: 1;   transform: scale(1.03); }
}

/* ── Staging area (after file selected) ── */
.upload-staging {
  display: grid;
  grid-template-columns: 1fr 380px;
  min-height: calc(100vh - 72px);
  gap: 0;
}

.staging-preview-wrap {
  position: relative;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  min-height: 400px;
}
.staging-preview-media {
  width: 100%; height: 100%;
  object-fit: contain;
  max-height: calc(100vh - 62px);
  display: block;
}
.staging-preview-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 16px 20px;
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
  display: flex; align-items: flex-end; justify-content: space-between;
}
.staging-file-info {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.68rem;
  color: rgba(200,216,232,0.7);
  letter-spacing: 0.08em;
  line-height: 1.6;
}
.staging-change-btn {
  background: rgba(0,200,255,0.12);
  border: 1px solid rgba(0,200,255,0.3);
  border-radius: 3px;
  padding: 7px 14px;
  color: var(--accent);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.staging-change-btn:hover { background: rgba(0,200,255,0.2); box-shadow: var(--glow); }

/* form panel */
.staging-form-panel {
  background: var(--bg2);
  border-left: 1px solid var(--border);
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 22px;
  overflow-y: auto;
}
.staging-form-header {
  display: flex; align-items: center; justify-content: space-between;
}
.staging-form-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.staging-clear-btn {
  background: none; border: none;
  color: var(--dim); cursor: pointer;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  transition: color 0.2s;
  padding: 4px 8px;
}
.staging-clear-btn:hover { color: var(--red); }

.staging-field { display: flex; flex-direction: column; gap: 8px; }
.staging-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--dim);
}
.staging-textarea {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 12px 14px;
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem;
  resize: vertical;
  min-height: 90px;
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
}
.staging-textarea:focus { border-color: var(--accent); }
.staging-textarea::placeholder { color: var(--dim); }

/* category mode toggle */
.cat-mode-row {
  display: flex; gap: 0; margin-bottom: 10px;
  border: 1px solid var(--border); border-radius: 3px; overflow: hidden;
}
.cat-mode-btn {
  flex: 1; padding: 8px 12px;
  background: none; border: none;
  color: var(--dim);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.62rem; letter-spacing: 0.1em;
  cursor: pointer; transition: all 0.2s;
}
.cat-mode-btn:first-child { border-right: 1px solid var(--border); }
.cat-mode-btn.active { background: rgba(0,200,255,0.1); color: var(--accent); }
.cat-mode-btn:hover:not(.active) { color: var(--text); background: rgba(255,255,255,0.03); }

/* new category input area */
.cat-new-wrap {
  display: flex; flex-direction: column; gap: 8px;
}
.cat-new-row {
  display: flex; gap: 8px; align-items: center;
}
.cat-new-input {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 10px 13px;
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
}
.cat-new-input:focus { border-color: var(--accent); }
.cat-new-input::placeholder { color: var(--dim); }
.cat-new-confirm {
  background: rgba(0,200,255,0.1);
  border: 1px solid rgba(0,200,255,0.3);
  border-radius: 3px;
  padding: 10px 16px;
  color: var(--accent);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.68rem; letter-spacing: 0.1em;
  cursor: pointer; transition: all 0.2s;
  white-space: nowrap;
}
.cat-new-confirm:hover { background: rgba(0,200,255,0.2); box-shadow: var(--glow); }
.cat-new-preview {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.62rem; color: var(--dim);
  letter-spacing: 0.08em;
}
.cat-new-preview span {
  color: var(--accent2);
  font-weight: 700;
  margin-left: 6px;
}
.cat-new-hint {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.58rem; color: var(--dim);
  letter-spacing: 0.06em; line-height: 1.5;
  opacity: 0.7;
}

/* game tags */
.game-tag-grid {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.game-tag {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 8px 14px;
  color: var(--dim);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.2s;
}
.game-tag:hover { border-color: var(--accent); color: var(--accent); background: rgba(0,200,255,0.05); }
.game-tag.selected {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0,200,255,0.1);
  box-shadow: 0 0 12px rgba(0,200,255,0.2);
}

/* progress */
.staging-progress-wrap { display: flex; flex-direction: column; gap: 8px; }
.staging-progress-label {
  display: flex; justify-content: space-between;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.staging-progress-bar {
  height: 4px; background: var(--bg3);
  border-radius: 2px; overflow: hidden;
}
.staging-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  width: 0%;
  transition: width 0.2s;
}

.guest-upload-notice {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.62rem;
  color: var(--dim);
  letter-spacing: 0.06em;
  text-align: center;
  padding: 8px 0 0;
  line-height: 1.6;
}

/* deploy button */
.btn-deploy {
  background: linear-gradient(135deg, #003d6e, #0077bb, #00c8ff);
  border: none; border-radius: 3px;
  padding: 18px 24px;
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  transition: all 0.25s;
  position: relative; overflow: hidden;
  margin-top: auto;
}
.btn-deploy::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent, rgba(255,255,255,0.1), transparent);
  transform: translateX(-100%);
  transition: transform 0.5s;
}
.btn-deploy:hover::before { transform: translateX(100%); }
.btn-deploy:hover { box-shadow: 0 0 40px rgba(0,200,255,0.5); transform: translateY(-2px); }
.btn-deploy:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.deploy-icon { font-size: 1.2rem; }
.deploy-text { flex: 1; text-align: center; }
.deploy-arrow { font-size: 1rem; transition: transform 0.2s; }
.btn-deploy:hover .deploy-arrow { transform: translateX(5px); }

/* keep old progress-bar id working */
#progress-bar { display: none; }
#progress-fill { width: 0%; }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET (≤ 900px)
══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* upload staging stacks vertically */
  .upload-staging { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .staging-preview-wrap { min-height: 50vw; max-height: 60vw; }
  .staging-form-panel { border-left: none; border-top: 1px solid var(--border); }
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤ 768px)
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── NAVBAR — top bar: logo + auth only ── */
  .navbar {
    padding: 0 10px;
    height: 52px;
    gap: 6px;
    flex-wrap: nowrap;
  }
  .nav-logo { height: 36px; width: 36px; }
  .nav-brand { display: none; }
  .nav-label { display: none; }

  /* Hide nav-center on mobile — moved to bottom tab bar */
  .nav-center { display: none; }

  /* Nav-right: compact auth buttons */
  .nav-right { gap: 6px; margin-left: auto; }
  .nav-clock { display: block; margin-left: auto; }
  #nav-guest, #nav-user { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
  .nav-btn { padding: 5px 8px; font-size: 0.85rem; gap: 3px; }
  .btn-signin { padding: 5px 10px; font-size: 0.6rem; }
  .btn-join   { padding: 5px 10px; font-size: 0.6rem; }
  .theme-toggle { padding: 3px 8px; }
  .theme-toggle-label { display: none; }
  .home-btn { display: none !important; }
  .exit-btn { font-size: 0.7rem; padding: 5px 8px !important; }

  /* ── MOBILE BOTTOM TAB BAR ── */
  .mobile-tab-bar {
    display: flex !important;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 200;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    background: rgba(8,11,16,0.98);
    border-top: 1px solid var(--border);
    backdrop-filter: blur(16px);
    align-items: flex-start;
    justify-content: space-around;
    padding: 4px 4px env(safe-area-inset-bottom, 0px);
  }
  .mobile-tab-bar::before {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--accent) 30%, var(--accent2) 70%, transparent 100%);
    opacity: 0.5;
  }
  .mobile-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: none;
    border: none;
    color: var(--dim);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    padding: 4px 6px;
    transition: color 0.2s;
    position: relative;
    min-width: 0;
  }
  .mobile-tab .tab-icon { font-size: 1.15rem; line-height: 1; }
  .mobile-tab .tab-label { white-space: nowrap; }
  .mobile-tab:hover, .mobile-tab.active { color: var(--accent); }
  .mobile-tab.active::after {
    content: '';
    position: absolute;
    top: -1px; left: 20%; right: 20%;
    height: 2px;
    background: var(--accent);
    border-radius: 0 0 2px 2px;
  }
  .mobile-tab .badge {
    position: absolute;
    top: 0; right: 2px;
    font-size: 0.45rem;
    min-width: 14px;
    height: 14px;
    line-height: 14px;
    padding: 0 3px;
  }

  /* ── MAIN CONTENT — account for bottom tab bar ── */
  .main-content { padding: 52px 0 72px; }
  #page-feed { padding: 0 12px; }
  #page-upload { padding: 0; }
  #page-messages { padding: 0 12px; }
  #page-profile  { padding: 0 12px; }
  #page-user-profile { padding: 0 12px; }

  /* ── FEED HEADER ── */
  .feed-header { padding: 10px 0 8px; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
  .btn-upload-inline { padding: 8px 14px; font-size: 0.65rem; }

  /* ── FEED BANNER — compact on mobile ── */
  .feed-banner { padding: 12px 0 10px; margin-bottom: 0; gap: 12px; }
  .feed-banner-logo { width: 48px; height: 48px; }

  /* ── FEED TABS — sticky under mobile navbar ── */
  .feed-tabs { top: 52px; }

  /* ── FILTER BAR — horizontal scroll, no wrap ── */
  .feed-filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 6px 0 8px;
    gap: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 0;
  }
  .feed-filter-bar::-webkit-scrollbar { display: none; }
  .feed-filter { flex-shrink: 0; padding: 5px 11px; font-size: 0.6rem; }

  /* ── Panel section headers ── */
  .panel-section-header { padding: 12px 0 10px; margin: 2px 0 8px; }
  .psh-label { font-size: 0.55rem; letter-spacing: 0.14em; }

  /* ── POST CARDS ── */
  .post-header   { padding: 12px 14px 8px; }
  .post-caption  { padding: 8px 14px 4px; }
  .post-reactions{ padding: 6px 14px; }
  .post-comments { padding: 4px 14px 14px; }
  .post-tag      { padding: 0 14px 6px; }
  .post-media    { max-height: 55vw; }
  .sk-media      { height: 40vw; }
  .floating-emoji { font-size: 2rem; }

  /* ── HERO ── */
  .hero-section { padding: 60px 16px 40px; }
  .hero-logo-stage { width: 220px; height: 220px; }
  .hero-logo { width: 170px; height: 170px; }
  .hero-title { font-size: clamp(3rem, 18vw, 5rem); }
  .hero-sub { font-size: 0.7rem; letter-spacing: 0.3em; }
  .hero-desc { font-size: 0.95rem; }
  .hero-tags { gap: 6px; }
  .hero-tags span { padding: 4px 10px; font-size: 0.65rem; }
  .hero-actions { gap: 10px; margin-top: 20px; }
  .btn-enter-site { padding: 14px 24px; font-size: 0.75rem; }
  .btn-enter-ghost { padding: 14px 20px; font-size: 0.75rem; }
  .hero-squad-pic { max-width: 100%; }
  /* HUD bar — fewer items, smaller text */
  .hero-hud { gap: 14px; padding: 8px 12px; }
  .hud-item { font-size: 0.5rem; letter-spacing: 0.1em; }
  .hud-coords { display: none; }

  /* ── MESSAGES ── */
  .messages-layout { grid-template-columns: 1fr; height: auto; gap: 10px; }
  .users-list { height: 180px; }
  .chat-panel { height: 55vh; }
  .messages-page-header { padding: 12px 0 6px; }

  /* ── PROFILE ── */
  .profile-hero { flex-direction: column; text-align: center; padding: 20px 16px; gap: 14px; }
  .profile-hero .pub-profile-back { align-self: center; }
  .profile-avatar { width: 72px; height: 72px; }
  .profile-name { font-size: 1.1rem; }

  /* ── UPLOAD DROP ZONE ── */
  .dropzone-arena { min-height: calc(100vh - 60px); }
  .dz-inner { padding: 50px 16px 40px; gap: 20px; }
  .dz-action-row { gap: 12px; }
  .dz-action-btn { padding: 22px 16px; min-width: 140px; }
  .dz-action-icon { font-size: 2.2rem; }
  .dz-action-label { font-size: 0.7rem; }
  .dz-action-sub { font-size: 0.52rem; }
  .dz-mission-quote { font-size: 0.75rem; }
  .dz-ms-body { font-size: 0.8rem; }
  .dz-back-btn { top: 14px; left: 14px; padding: 7px 12px; font-size: 0.6rem; }

  /* ── UPLOAD STAGING ── */
  .upload-staging { grid-template-columns: 1fr; }
  .staging-preview-wrap { min-height: 45vw; max-height: 56vw; }
  .staging-form-panel { border-left: none; border-top: 1px solid var(--border); padding: 18px 16px; }
  .staging-form-header { margin-bottom: 4px; }

  /* ── MODALS ── */
  .modal-box { padding: 24px 18px; }

  /* ── SECTION TITLES ── */
  .section-title { font-size: 0.68rem; padding: 16px 0 12px; }

  /* ── WAR-ROOM TICKER ── */
  .wr-ticker { height: 22px; }
  .wr-ticker-inner { font-size: 0.48rem; }

  /* ── ZONE LAYOUT — no sidebars ── */
  .sidebar { display: none !important; }
  .zone-layout .main-content { max-width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE (≤ 480px)
══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* ── NAVBAR — already handled by 768px, just tweak sizes ── */
  .nav-center .discord-nav { display: none; }
  .btn-signin { padding: 4px 8px; font-size: 0.55rem; letter-spacing: 0.05em; }

  /* ── HERO ── */
  .hero-logo-stage { width: 180px; height: 180px; }
  .hero-logo { width: 140px; height: 140px; }
  .hero-title { font-size: clamp(2.8rem, 20vw, 4rem); }
  .hero-content { gap: 16px; }
  .hero-signatures { padding-top: 12px; }
  .sig-name { font-size: clamp(1.3rem, 6vw, 2rem); }
  .sig-names { gap: 6px; padding: 0 8px; flex-direction: column; }
  .sig-amp { font-size: 0.9rem; }

  /* ── DROP ZONE — single column action buttons ── */
  .dz-action-row { flex-direction: column; align-items: stretch; }
  .dz-action-btn { max-width: 100%; width: 100%; flex-direction: row; padding: 16px 20px; gap: 14px; justify-content: flex-start; }
  .dz-action-icon { font-size: 1.8rem; }
  .dz-action-label { font-size: 0.78rem; }
  .dz-inner { padding: 44px 14px 36px; gap: 16px; }
  .dz-mission-statement { padding: 10px 14px; }

  /* ── PROFILE ── */
  .profile-hero { padding: 16px 12px; }
  .pub-profile-hero { padding: 20px 14px; flex-direction: column; text-align: center; }
  .pub-profile-hero .pub-profile-back { align-self: center; }

  /* ── MODAL ── */
  .modal-box { padding: 20px 14px; }
  .gate-title { font-size: 0.9rem; }

  /* ── FEED ── */
  .feed-header { gap: 6px; }
  .btn-upload-inline { padding: 7px 12px; font-size: 0.6rem; }

  /* ── MESSAGES ── */
  .chat-panel { height: 50vh; }
}
.messages-page-header {
  padding: 16px 0 8px;
  display: flex; align-items: center;
}
.messages-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 14px;
  height: calc(100vh - 120px);
  padding: 4px 0;
}
.users-list { background: var(--panel); border: 1px solid var(--border); border-radius: 3px; overflow-y: auto; }
.users-list-header { padding: 12px 14px; font-family: 'Orbitron', sans-serif; font-size: 0.7rem; color: var(--accent); letter-spacing: 0.1em; border-bottom: 1px solid var(--border); }
.user-item { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; transition: background 0.2s; border-bottom: 1px solid rgba(30,45,61,0.5); }
.user-item:hover, .user-item.active { background: rgba(0,200,255,0.07); }
.user-item-avatar { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--border); object-fit: cover; background: var(--bg); }
.user-item-name { font-family: 'Rajdhani', sans-serif; font-size: 0.92rem; font-weight: 600; }
.user-item-time { font-size: 0.65rem; color: var(--dim); font-family: 'Share Tech Mono', monospace; }
.user-unread-badge {
  background: var(--accent2);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  font-family: 'Share Tech Mono', monospace;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  margin-left: auto;
  flex-shrink: 0;
  animation: fadeIn 0.3s ease;
}
.msg-section-header { padding: 10px 14px 6px; font-family: 'Orbitron', sans-serif; font-size: 0.6rem; color: var(--dim); letter-spacing: 0.12em; border-bottom: 1px solid rgba(30,45,61,0.3); }

.chat-panel { background: var(--panel); border: 1px solid var(--border); border-radius: 3px; display: flex; flex-direction: column; }
.chat-header { padding: 12px 18px; border-bottom: 1px solid var(--border); font-family: 'Orbitron', sans-serif; font-size: 0.8rem; color: var(--accent); display: flex; align-items: center; gap: 10px; }
.chat-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 68%; padding: 9px 13px; border-radius: 4px; font-size: 0.88rem; line-height: 1.4; animation: fadeIn 0.2s ease; }
.msg.sent { align-self: flex-end; background: linear-gradient(135deg, #004d88, #0088cc); border-bottom-right-radius: 0; }
.msg.received { align-self: flex-start; background: var(--bg3); border: 1px solid var(--border); border-bottom-left-radius: 0; }
.msg-time { font-size: 0.6rem; color: rgba(255,255,255,0.35); margin-top: 3px; font-family: 'Share Tech Mono', monospace; }
.chat-input-row { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border); }
.chat-input { flex: 1; background: var(--bg3); border: 1px solid var(--border); border-radius: 3px; padding: 9px 13px; color: var(--text); font-family: 'Rajdhani', sans-serif; font-size: 0.92rem; outline: none; transition: border-color 0.2s; }
/* ── DM date separators ── */
.msg-date-sep {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 4px;
}
.msg-date-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.msg-date-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.55rem;
  color: var(--dim);
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.chat-input:focus { border-color: var(--accent); }

/* ── PROFILE ── */
.profile-hero {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 28px;
  display: flex; align-items: center; gap: 24px;
  margin-bottom: 20px;
  position: relative; overflow: hidden;
  flex-wrap: wrap;
}
.profile-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--accent), var(--accent2)); opacity: 0.6; }
.profile-hero .pub-profile-back { align-self: flex-start; margin-left: auto; }
.profile-avatar-wrap { position: relative; }
.profile-avatar { width: 90px; height: 90px; border-radius: 50%; border: 2px solid rgba(0,200,255,0.4); object-fit: cover; box-shadow: none; background: var(--bg); }
.profile-avatar-edit { position: absolute; bottom: 0; right: 0; background: var(--accent); border: none; border-radius: 50%; width: 26px; height: 26px; cursor: pointer; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; color: #000; }
.profile-info { flex: 1; }
.profile-name { font-family: 'Orbitron', sans-serif; font-size: 1.3rem; font-weight: 900; color: var(--accent); margin-bottom: 4px; }
.profile-email {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.68rem;
  color: var(--dim);
  letter-spacing: 0.06em;
  margin-bottom: 5px;
}
.profile-bio { color: var(--dim); font-size: 0.88rem; margin-bottom: 6px; }
.profile-online { font-family: 'Share Tech Mono', monospace; font-size: 0.75rem; color: var(--green); display: flex; align-items: center; gap: 6px; }
.profile-online::before { content: ''; width: 7px; height: 7px; background: var(--green); border-radius: 50%; box-shadow: 0 0 8px var(--green); animation: blink 1.5s infinite; }
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0.2; } }

.profile-edit-form { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 20px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.profile-edit-form input { background: var(--bg3); border: 1px solid var(--border); border-radius: 3px; padding: 10px 13px; color: var(--text); font-family: 'Rajdhani', sans-serif; font-size: 0.95rem; outline: none; transition: border-color 0.2s; width: 100%; }
.profile-edit-form input:focus { border-color: var(--accent); }

/* ── PROFILE BACKGROUND PICKER ── */
.pbg-picker-section { display: flex; flex-direction: column; gap: 8px; }
.pbg-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
}
.pbg-swatch {
  aspect-ratio: 16/9;
  border-radius: 4px;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
  position: relative;
  overflow: hidden;
}
.pbg-swatch:hover { border-color: var(--accent); transform: scale(1.05); }
.pbg-swatch.active { border-color: var(--accent); box-shadow: 0 0 10px rgba(0,200,255,0.4); }
.pbg-swatch.active::after {
  content: '✓';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: #fff;
  background: rgba(0,0,0,0.35);
  text-shadow: 0 0 6px #000;
}
.pbg-swatch-none {
  background: var(--panel);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.5rem; color: var(--dim);
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: 0.08em;
}

/* ══════════════════════════════════════════════════════════════════
   PROFILE BACKGROUNDS — all pure CSS, no images needed
══════════════════════════════════════════════════════════════════ */

/* Neon Grid */
.pbg-neon-grid {
  background:
    linear-gradient(rgba(0,200,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,255,0.07) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 0%, rgba(0,200,255,0.15) 0%, transparent 70%),
    var(--panel);
  background-size: 24px 24px, 24px 24px, 100% 100%, 100% 100%;
}

/* Cyber Pulse */
.pbg-cyber-pulse {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,200,255,0.04) 3px, rgba(0,200,255,0.04) 4px),
    radial-gradient(ellipse at 20% 50%, rgba(0,200,255,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(255,0,102,0.1) 0%, transparent 50%),
    var(--panel);
}

/* Tactical Camo */
.pbg-tactical {
  background:
    radial-gradient(ellipse at 15% 30%, rgba(57,255,20,0.08) 0%, transparent 40%),
    radial-gradient(ellipse at 85% 70%, rgba(57,255,20,0.06) 0%, transparent 35%),
    radial-gradient(ellipse at 50% 50%, rgba(57,255,20,0.04) 0%, transparent 60%),
    linear-gradient(135deg, #0a120a 25%, #0d1a0d 50%, #0a0f0a 75%);
}

/* Magma */
.pbg-magma {
  background:
    radial-gradient(ellipse at 30% 80%, rgba(255,68,0,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 20%, rgba(255,140,0,0.1) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 50%, rgba(255,34,68,0.06) 0%, transparent 60%),
    linear-gradient(180deg, #1a0a00 0%, #0d0500 100%);
}

/* Deep Space */
.pbg-deep-space {
  background:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 60%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 10%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 80%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 40%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(ellipse at 50% 50%, rgba(60,0,120,0.15) 0%, transparent 70%),
    linear-gradient(180deg, #050510 0%, #0a0a1a 100%);
}

/* Glitch */
.pbg-glitch {
  background:
    repeating-linear-gradient(90deg, rgba(255,0,102,0.06) 0px, transparent 2px, transparent 8px),
    repeating-linear-gradient(0deg, rgba(0,200,255,0.04) 0px, transparent 1px, transparent 6px),
    linear-gradient(135deg, rgba(255,0,102,0.08) 0%, transparent 30%, rgba(0,200,255,0.08) 70%, transparent 100%),
    var(--panel);
}

/* Hex Pattern */
.pbg-hex {
  background:
    radial-gradient(circle at 0% 50%, rgba(0,200,255,0.06) 0%, transparent 25%),
    radial-gradient(circle at 100% 50%, rgba(0,200,255,0.06) 0%, transparent 25%),
    radial-gradient(circle at 50% 0%, rgba(0,200,255,0.04) 0%, transparent 25%),
    radial-gradient(circle at 50% 100%, rgba(0,200,255,0.04) 0%, transparent 25%),
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(0,200,255,0.02) 0deg 60deg, transparent 60deg 120deg),
    var(--panel);
}

/* Warzone */
.pbg-warzone {
  background:
    linear-gradient(rgba(57,255,20,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57,255,20,0.03) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 0%, rgba(57,255,20,0.1) 0%, transparent 60%),
    linear-gradient(180deg, #060d06 0%, #0a0e0a 100%);
  background-size: 32px 32px, 32px 32px, 100% 100%, 100% 100%;
}

/* Sunset */
.pbg-sunset {
  background:
    linear-gradient(180deg,
      rgba(255,100,50,0.12) 0%,
      rgba(255,50,100,0.08) 30%,
      rgba(100,0,200,0.1) 60%,
      rgba(20,0,60,0.15) 100%),
    var(--panel);
}

/* Arctic */
.pbg-arctic {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(100,200,255,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(150,220,255,0.08) 0%, transparent 40%),
    linear-gradient(180deg, #0a1520 0%, #081018 100%);
}

/* Vaporwave */
.pbg-vaporwave {
  background:
    linear-gradient(rgba(255,0,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,0,255,0.04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,0,255,0.08) 0%, rgba(0,200,255,0.06) 50%, rgba(255,100,200,0.08) 100%),
    var(--panel);
  background-size: 40px 40px, 40px 40px, 100% 100%, 100% 100%;
}

/* Carbon Fiber */
.pbg-carbon {
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 50%),
    var(--panel);
  background-size: 4px 4px, 100% 100%, 100% 100%;
}

/* Gold */
.pbg-gold {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,200,50,0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(255,170,0,0.06) 0%, transparent 40%),
    linear-gradient(180deg, #1a1400 0%, #0d0a00 100%);
}

/* Toxic */
.pbg-toxic {
  background:
    radial-gradient(ellipse at 40% 30%, rgba(0,255,100,0.1) 0%, transparent 40%),
    radial-gradient(ellipse at 60% 70%, rgba(100,255,0,0.08) 0%, transparent 35%),
    repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,255,50,0.02) 10px, rgba(0,255,50,0.02) 11px),
    linear-gradient(180deg, #0a1a0a 0%, #050d05 100%);
}

/* Radar */
.pbg-radar {
  background:
    repeating-conic-gradient(from 0deg at 50% 100%, rgba(0,200,255,0.04) 0deg 1deg, transparent 1deg 90deg),
    radial-gradient(circle at 50% 100%, rgba(0,200,255,0.1) 0%, transparent 60%),
    radial-gradient(circle at 50% 100%, transparent 20%, rgba(0,200,255,0.03) 20.5%, transparent 21%),
    radial-gradient(circle at 50% 100%, transparent 40%, rgba(0,200,255,0.03) 40.5%, transparent 41%),
    radial-gradient(circle at 50% 100%, transparent 60%, rgba(0,200,255,0.03) 60.5%, transparent 61%),
    var(--panel);
}

/* Bloodline */
.pbg-bloodline {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,0,0,0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 100%, rgba(180,0,0,0.08) 0%, transparent 40%),
    repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,0,0,0.02) 3px, rgba(255,0,0,0.02) 4px),
    linear-gradient(180deg, #1a0505 0%, #0d0202 100%);
}

/* Matrix */
.pbg-matrix {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,255,65,0.03) 2px, rgba(0,255,65,0.03) 3px),
    repeating-linear-gradient(90deg, transparent, transparent 20px, rgba(0,255,65,0.015) 20px, rgba(0,255,65,0.015) 21px),
    radial-gradient(ellipse at 50% 0%, rgba(0,255,65,0.08) 0%, transparent 60%),
    linear-gradient(180deg, #000d00 0%, #000800 100%);
}

/* Nebula */
.pbg-nebula {
  background:
    radial-gradient(ellipse at 25% 30%, rgba(100,0,255,0.12) 0%, transparent 45%),
    radial-gradient(ellipse at 75% 60%, rgba(0,150,255,0.1) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 80%, rgba(255,0,150,0.08) 0%, transparent 35%),
    radial-gradient(1px 1px at 20% 50%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 30%, rgba(255,255,255,0.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 70%, rgba(255,255,255,0.3) 0%, transparent 100%),
    linear-gradient(180deg, #0a0515 0%, #050210 100%);
}

/* Thunder */
.pbg-thunder {
  background:
    linear-gradient(170deg, transparent 40%, rgba(255,255,200,0.04) 40.5%, transparent 41%),
    linear-gradient(175deg, transparent 55%, rgba(255,255,200,0.03) 55.3%, transparent 55.6%),
    radial-gradient(ellipse at 50% 0%, rgba(100,100,255,0.08) 0%, transparent 50%),
    linear-gradient(180deg, #0a0a14 0%, #050508 100%);
}

/* Hologram */
.pbg-hologram {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,200,255,0.03) 2px, rgba(0,200,255,0.03) 3px),
    linear-gradient(135deg, rgba(0,200,255,0.08) 0%, rgba(255,0,255,0.06) 33%, rgba(0,255,200,0.06) 66%, rgba(255,200,0,0.06) 100%),
    var(--panel);
}

/* ── SHARED BUTTONS ── */
.btn-primary {
  background: rgba(0,200,255,0.1);
  border: 1px solid rgba(0,200,255,0.3);
  border-radius: 3px;
  padding: 12px 20px;
  color: var(--accent);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: all 0.25s;
  text-transform: uppercase;
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
}
.btn-primary::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent, rgba(0,200,255,0.05), transparent);
  transform: translateX(-100%);
  transition: transform 0.5s;
}
.btn-primary:hover::before { transform: translateX(100%); }
.btn-primary:hover { background: rgba(0,200,255,0.15); border-color: var(--accent); color: #fff; transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-arrow { font-size: 1rem; transition: transform 0.2s; }
.btn-primary:hover .btn-arrow { transform: translateX(4px); }

.btn-secondary {
  background: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 13px 20px;
  color: var(--text);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

/* ── EMPTY / SPINNER ── */
.empty-state { text-align: center; padding: 50px 20px; color: var(--dim); }
.empty-state .empty-icon { font-size: 2rem; margin-bottom: 10px; opacity: 0.5; }
.empty-state p { font-family: 'Share Tech Mono', monospace; font-size: 0.75rem; letter-spacing: 0.04em; }
.spinner { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 40px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── TOASTS ── */
.toast-container { position: fixed; bottom: 22px; right: 22px; z-index: 9999; display: flex; flex-direction: column; gap: 7px; }
.toast { background: var(--panel); border: 1px solid rgba(30,45,61,0.5); border-left: 2px solid var(--accent); border-radius: 3px; padding: 10px 16px; font-family: 'Share Tech Mono', monospace; font-size: 0.7rem; color: var(--text); box-shadow: 0 4px 24px rgba(0,0,0,0.6); animation: slideIn 0.3s ease; max-width: 280px; letter-spacing: 0.02em; }
.toast.error   { border-left-color: var(--red); }
.toast.success { border-left-color: var(--green); }
@keyframes slideIn  { from { transform:translateX(100%); opacity:0; } to { transform:translateX(0); opacity:1; } }
@keyframes slideOut { from { transform:translateX(0); opacity:1; } to { transform:translateX(100%); opacity:0; } }

/* ── BACK TO TOP ── */
.back-to-top {
  position: fixed; bottom: 80px; right: 22px; z-index: 9990;
  width: 40px; height: 40px;
  background: rgba(107,138,61,0.1);
  border: 1px solid rgba(107,138,61,0.3);
  border-radius: 50%;
  color: var(--olive-bright);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s, transform 0.2s, background 0.2s;
  transform: translateY(10px);
}
.back-to-top.visible { opacity: 1; pointer-events: all; transform: translateY(0); }
.back-to-top:hover { background: rgba(107,138,61,0.2); }

/* On mobile, move back-to-top above the tab bar and to the left so it doesn't overlap post buttons */
@media (max-width: 768px) {
  .back-to-top {
    bottom: 68px;
    right: auto;
    left: 12px;
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
  }
}

/* ── IMAGE LIGHTBOX ── */
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.92);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
  cursor: zoom-out;
  backdrop-filter: blur(8px);
}
.lightbox-overlay.open {
  opacity: 1; pointer-events: all;
}
.lightbox-img {
  max-width: 92vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 0 60px rgba(0,0,0,0.5);
  transform: scale(0.9);
  transition: transform 0.3s ease;
}
.lightbox-overlay.open .lightbox-img {
  transform: scale(1);
}
.lightbox-close {
  position: absolute; top: 20px; right: 24px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  width: 40px; height: 40px;
  color: #fff; font-size: 1.2rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.lightbox-close:hover { background: rgba(255,255,255,0.2); }

/* ── CONFETTI ── */
.confetti-piece {
  position: fixed;
  top: -10px;
  z-index: 9999;
  pointer-events: none;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ── POST FOOTER BAR ── */
.post-footer-bar {
  display: flex; gap: 12px; align-items: center;
  padding: 6px 20px 4px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.58rem;
  color: var(--dim);
  letter-spacing: 0.06em;
  min-height: 20px;
}
.post-stat { opacity: 0.6; }
.post-bookmark, .post-share {
  background: none; border: none; cursor: pointer;
  font-size: 0.8rem; padding: 2px 4px;
  opacity: 0.4; transition: opacity 0.2s;
}
.post-bookmark:hover, .post-share:hover { opacity: 0.9; }

/* ══════════════════════════════════════════════════════════════════
   AUTH MODAL
══════════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
}
.modal-overlay.open { display: flex; animation: fadeIn 0.2s ease; }

.modal-box {
  background: var(--panel);
  border: 1px solid rgba(30,45,61,0.5);
  border-top: 1px solid rgba(0,200,255,0.2);
  border-radius: 4px;
  padding: 32px;
  width: 100%;
  max-width: 400px;
  position: relative;
  box-shadow: 0 8px 60px rgba(0,0,0,0.8), 0 0 1px rgba(0,200,255,0.1);
  animation: popIn 0.25s ease;
}

@keyframes popIn { from { transform:scale(0.94); opacity:0; } to { transform:scale(1); opacity:1; } }

.modal-close {
  position: absolute; top: 14px; right: 14px;
  background: none; border: none;
  color: var(--dim); cursor: pointer;
  font-size: 1rem; padding: 4px 8px;
  border-radius: 3px; transition: color 0.2s;
}
.modal-close:hover { color: var(--text); }

.modal-logo {
  text-align: center;
  margin-bottom: 20px;
}
.modal-logo img {
  width: 70px; height: 70px;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(0,200,255,0.5));
  animation: logo-pulse 4s ease-in-out infinite;
}

.auth-tabs {
  display: flex;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.auth-tab {
  flex: 1; padding: 9px;
  background: none; border: none;
  color: var(--dim);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.2s;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.auth-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.auth-tab:hover:not(.active) { color: var(--text); }

.auth-form { display: flex; flex-direction: column; gap: 14px; }

.input-group { display: flex; flex-direction: column; gap: 5px; }
.input-label { font-family: 'Share Tech Mono', monospace; font-size: 0.62rem; letter-spacing: 0.15em; color: var(--dim); }

.auth-form input {
  background: rgba(8,11,16,0.8);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 12px 14px;
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}
.auth-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,200,255,0.07);
}

.auth-error {
  color: var(--red);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.72rem;
  text-align: center;
  min-height: 16px;
}

.age-gate-row { flex-direction: row; }
.age-gate-label {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.85rem;
  color: var(--dim);
  cursor: pointer;
}
.age-gate-label input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}
.age-gate-label strong { color: var(--text); }

.auth-switch {
  text-align: center;
  font-size: 0.82rem;
  color: var(--dim);
}
.link-btn {
  background: none; border: none;
  color: var(--accent); cursor: pointer;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.82rem;
  text-decoration: underline;
  padding: 0;
}
/* ── Auto-linked URLs in posts/comments/DMs ── */
.auto-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted rgba(0,200,255,0.3);
  transition: border-color 0.2s, color 0.2s;
  word-break: break-all;
}
.auto-link:hover {
  color: var(--accent2);
  border-bottom-color: var(--accent2);
}

/* ── GATE MODAL ── */
.gate-box { text-align: center; }
.gate-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
.gate-msg {
  color: var(--dim);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 22px;
}
.gate-btns { display: flex; flex-direction: column; gap: 10px; }

/* ══════════════════════════════════════════════════════════════════
   PUBLIC USER PROFILE
══════════════════════════════════════════════════════════════════ */
#page-user-profile { padding: 0 20px; }

.pub-profile-hero {
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  border-radius: 6px;
  padding: 28px;
  display: flex; align-items: center; gap: 24px;
  margin: 20px 0;
  position: relative;
  flex-wrap: wrap;
}
.pub-profile-avatar {
  width: 90px; height: 90px;
  border-radius: 50%;
  border: 3px solid var(--accent);
  object-fit: cover;
  box-shadow: var(--glow);
  background: var(--bg);
  flex-shrink: 0;
}
.pub-profile-info { flex: 1; min-width: 140px; }
.pub-profile-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.3rem; font-weight: 900;
  color: var(--accent); margin-bottom: 6px;
}
.pub-profile-bio { color: var(--dim); font-size: 0.9rem; margin-bottom: 5px; }
.pub-profile-online {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.75rem; color: var(--green);
  display: flex; align-items: center; gap: 6px;
}
.pub-profile-online::before {
  content: ''; width: 7px; height: 7px;
  background: var(--green); border-radius: 50%;
  box-shadow: 0 0 8px var(--green);
  animation: blink 1.5s infinite;
}
.pub-profile-back {
  background: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 8px 16px;
  color: var(--dim);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  align-self: flex-start;
}
.pub-profile-back:hover { border-color: var(--accent); color: var(--accent); }
.pub-profile-feed { margin-top: 0; }

/* ── Infinite scroll sentinel / load indicator ── */
#feed-sentinel {
  height: 40px;
  display: flex; align-items: center; justify-content: center;
}
.feed-loading-more {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.6rem; letter-spacing: 0.15em;
  color: var(--dim);
  display: flex; align-items: center; gap: 8px;
}
.feed-loading-more::before {
  content: '';
  width: 14px; height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* ── Video wrap ── */
.post-video-wrap { position: relative; background: #000; }
.post-video-wrap .post-media { width: 100%; display: block; max-height: 420px; object-fit: contain; }

/* ══════════════════════════════════════════════════════════════════
   ZONE LAYOUT — 3-column: sidebar | feed | sidebar
══════════════════════════════════════════════════════════════════ */
.zone-layout {
  display: none;
  align-items: flex-start;
  gap: 0;
  position: relative;
  z-index: 1;
  min-height: 100vh;
}
.zone-layout.site-visible {
  display: flex;
}

/* main-content sits in the middle, sidebars flank it */
.zone-layout .main-content {
  flex: 1;
  min-width: 0;
  max-width: 680px;
  margin: 0 auto;
}

/* ── SIDEBAR BASE ── */
.sidebar {
  width: 220px;
  flex-shrink: 0;
  position: sticky;
  top: 82px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding: 14px 10px;
  display: none; /* hidden until site entered */
  flex-direction: column;
  gap: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.sidebar.visible { display: flex; }

.sidebar-left  { border-right: 1px solid rgba(30,45,61,0.3); }
.sidebar-right { border-left:  1px solid rgba(30,45,61,0.3); }

/* ── SIDEBAR HEADER ── */
.sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px 8px;
  border-bottom: 1px solid rgba(30,45,61,0.4);
  margin-bottom: 10px;
}
.sidebar-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  color: var(--dim);
}
.sidebar-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 4px var(--accent);
  animation: blink 1.8s infinite;
}
.sidebar-dot-orange { background: var(--accent2); box-shadow: 0 0 4px var(--accent2); }
.sidebar-dot-green  { background: var(--green);   box-shadow: 0 0 4px var(--green); }

/* ── SIDEBAR CLIP CARD ── */
.sidebar-clips { display: flex; flex-direction: column; gap: 10px; }

.sb-clip {
  background: var(--panel);
  border: 1px solid rgba(30,45,61,0.5);
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s;
  border-left: 2px solid transparent;
}
.sb-clip:hover {
  border-color: rgba(0,200,255,0.3);
  border-left-color: var(--accent);
}

.sb-clip-thumb {
  width: 100%; aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  background: #000;
}
.sb-clip-thumb-placeholder {
  width: 100%; aspect-ratio: 16/9;
  background: var(--bg3);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
}
.sb-clip-info {
  padding: 7px 9px;
}
.sb-clip-user {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-clip-caption {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--dim);
  line-height: 1.3;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sb-clip-meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 4px;
}
.sb-clip-tag {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.52rem;
  letter-spacing: 0.08em;
  color: var(--accent2);
  opacity: 0.8;
}
.sb-clip-reactions {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.55rem;
  color: var(--dim);
}

/* popular rank badge */
.sb-clip-rank {
  position: absolute; top: 5px; left: 5px;
  background: rgba(255,106,0,0.85);
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.55rem;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 2px;
  letter-spacing: 0.08em;
}
.sb-clip-wrap { position: relative; }

/* ── INTEL FEED (right sidebar auto-news) ── */
.sidebar-intel { display: flex; flex-direction: column; gap: 8px; }

.sb-intel-item {
  padding: 8px 10px;
  background: var(--panel);
  border: 1px solid rgba(30,45,61,0.5);
  border-left: 2px solid rgba(57,255,20,0.4);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.sb-intel-item:hover { border-color: rgba(0,200,255,0.3); border-left-color: var(--accent); }

.sb-intel-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.52rem;
  letter-spacing: 0.14em;
  color: var(--green);
  margin-bottom: 4px;
  text-transform: uppercase;
}
.sb-intel-text {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sb-intel-sub {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.52rem;
  color: var(--dim);
  margin-top: 3px;
}

/* ── SIDEBAR EMPTY STATE ── */
.sb-empty {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.6rem;
  color: var(--dim);
  letter-spacing: 0.1em;
  text-align: center;
  padding: 20px 8px;
  opacity: 0.6;
}

/* ── SIDEBAR SQUADS WIDGET ── */
.sidebar-squads-list { display: flex; flex-direction: column; gap: 6px; }
.sidebar-squad-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.sidebar-squad-item:hover { border-color: var(--accent); background: rgba(0,200,255,0.05); }
.sidebar-squad-tag {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.6rem;
  color: var(--accent);
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.sidebar-squad-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.sidebar-squad-count {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.55rem;
  color: var(--dim);
  white-space: nowrap;
}
.sidebar-squads-actions {
  display: flex; gap: 6px; margin-top: 8px;
}
.sidebar-squad-btn {
  flex: 1;
  font-size: 0.55rem !important;
  padding: 5px 0 !important;
  text-align: center;
  border: 1px solid var(--border) !important;
  border-radius: 3px;
}
.sidebar-squad-btn:hover { border-color: var(--accent) !important; color: var(--accent); }
.sidebar-squads-empty {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.58rem;
  color: var(--dim);
  text-align: center;
  padding: 12px 8px;
  letter-spacing: 0.08em;
}

/* ── RESPONSIVE: hide sidebars below 1200px ── */
@media (max-width: 1200px) {
  .sidebar { display: none !important; }
  .zone-layout .main-content { max-width: 100%; margin: 0 auto; }
  .zone-layout { display: none; }
  .zone-layout.site-visible { display: block; }
}

/* ══════════════════════════════════════════════════════════════════
   PROFILE SETUP MODAL
══════════════════════════════════════════════════════════════════ */
.setup-box {
  max-width: 440px;
  text-align: center;
}

.setup-header { margin-bottom: 22px; }

.setup-welcome-tag {
  display: inline-block;
  background: rgba(255,106,0,0.12);
  border: 1px solid rgba(255,106,0,0.3);
  border-radius: 2px;
  padding: 3px 12px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  color: var(--accent2);
  margin-bottom: 10px;
}

.setup-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.setup-sub {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.9rem;
  color: var(--dim);
  font-weight: 600;
}

/* avatar picker */
.setup-avatar-section {
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  margin-bottom: 20px;
}

.setup-avatar-wrap {
  position: relative;
  width: 90px; height: 90px;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  border: 2px solid var(--border);
  transition: border-color 0.2s;
}
.setup-avatar-wrap:hover { border-color: var(--accent); }

.setup-avatar-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.setup-avatar-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;
  font-size: 1.4rem;
}
.setup-avatar-wrap:hover .setup-avatar-overlay { opacity: 1; }

.setup-avatar-hint {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  color: #fff;
}

.setup-avatar-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  color: var(--dim);
}

/* fields */
.setup-field {
  display: flex; flex-direction: column;
  gap: 6px; text-align: left;
  margin-bottom: 14px;
}

.setup-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: var(--dim);
}

.setup-optional {
  color: rgba(74,96,112,0.5);
  font-size: 0.55rem;
}

.setup-input {
  background: rgba(8,11,16,0.8);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 11px 13px;
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
}
.setup-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,200,255,0.07); }
.setup-input::placeholder { color: var(--dim); }

.setup-save-btn { margin-top: 6px; }

.setup-skip-btn {
  background: none; border: none;
  color: var(--dim);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  margin-top: 10px;
  transition: color 0.2s;
  padding: 4px;
}
.setup-skip-btn:hover { color: var(--text); }

/* ── PROFILE STATS ROW ── */
.profile-stats-row {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.profile-stat {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--dim);
  display: flex; align-items: center; gap: 5px;
}

/* ── PROFILE INCOMPLETE NUDGE ── */
.profile-nudge {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,106,0,0.06);
  border: 1px solid rgba(255,106,0,0.2);
  border-left: 3px solid var(--accent2);
  border-radius: 4px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.nudge-icon { font-size: 1.1rem; flex-shrink: 0; }

.nudge-text {
  flex: 1;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}

.nudge-btn {
  background: none; border: none;
  color: var(--dim); cursor: pointer;
  font-size: 0.9rem; padding: 2px 6px;
  border-radius: 3px; transition: color 0.2s;
  flex-shrink: 0;
}
.nudge-btn:hover { color: var(--text); }

/* ══════════════════════════════════════════════════════════════════
   SQUADS
══════════════════════════════════════════════════════════════════ */
.squads-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 16px 0 8px;
}

/* Squad cards list */
#my-squads-list {
  display: flex; flex-direction: column; gap: 12px;
  padding: 12px 0;
}

.squad-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.squad-card:hover {
  border-color: var(--accent);
  transform: translateX(2px);
}

.squad-card-banner {
  height: 80px;
  background-size: cover; background-position: center;
  background-color: var(--bg3);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
}
.squad-card-banner-empty { background: linear-gradient(135deg, var(--bg3), var(--panel)); }

.squad-card-body { padding: 14px 16px; }

.squad-card-tag {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  font-weight: 900;
  color: var(--accent2);
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}
.squad-card-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.squad-card-motto {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.85rem;
  color: var(--dim);
  font-style: italic;
  margin-bottom: 6px;
}
.squad-card-role {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  color: var(--green);
}

/* Squad invites */
.squad-invite-card {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--panel);
  border: 1px solid rgba(255,106,0,0.3);
  border-left: 3px solid var(--accent2);
  border-radius: 4px;
  padding: 12px 16px;
  margin-bottom: 8px;
  gap: 12px;
  flex-wrap: wrap;
}
.squad-invite-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.squad-invite-tag {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem; font-weight: 900;
  color: var(--accent2);
}
.squad-invite-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.8rem; color: var(--accent);
}
.squad-invite-from {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.6rem; color: var(--dim);
}
.squad-invite-actions { display: flex; gap: 10px; }

/* Squad detail */
.squad-detail-header {
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  border-radius: 6px;
  overflow: hidden;
  margin: 16px 0;
}
.squad-detail-banner {
  height: 140px;
  background-size: cover; background-position: center;
  background-color: var(--bg3);
}
.squad-detail-info { padding: 18px 20px 10px; }
.squad-detail-tag {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.8rem; font-weight: 900;
  color: var(--accent2); letter-spacing: 0.12em;
  margin-bottom: 4px;
}
.squad-detail-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.4rem; font-weight: 900;
  color: var(--accent); margin-bottom: 6px;
}
.squad-detail-motto {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.95rem; color: var(--dim);
  font-style: italic; margin-bottom: 8px;
}
.squad-detail-meta {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.6rem; color: var(--dim);
  letter-spacing: 0.1em;
}
.squad-detail-actions {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px 16px;
  flex-wrap: wrap;
}

/* Squad detail layout — feed left, chat right */
.squad-detail-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  margin-bottom: 40px;
}

.squad-detail-left { min-width: 0; }
.squad-detail-right {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex; flex-direction: column;
  height: calc(100vh - 200px);
  position: sticky; top: 82px;
}
.squad-detail-right .section-title {
  padding: 14px 16px 10px;
  margin: 0; border-bottom: 1px solid var(--border);
}

/* Squad members */
.squad-members-list {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 8px 0;
}
.squad-member-item {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 6px 12px;
}
.squad-member-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border);
  object-fit: cover;
}
.squad-member-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.85rem; font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.squad-member-name:hover { color: var(--accent); text-decoration: underline; }
.squad-member-role {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.5rem; letter-spacing: 0.1em;
}
.squad-role-owner { color: var(--accent2); }
.squad-role-officer { color: var(--accent); }
.squad-role-member { color: var(--dim); }

/* Squad post input */
.squad-post-input {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}

/* Squad chat */
.squad-chat-messages {
  flex: 1; overflow-y: auto;
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.squad-chat-msg {
  display: flex; gap: 8px; align-items: flex-start;
}
.squad-chat-msg.mine { flex-direction: row-reverse; }
.squad-chat-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border);
  object-fit: cover; flex-shrink: 0;
}
.squad-chat-bubble {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 12px;
  max-width: 75%;
  display: flex; flex-direction: column; gap: 2px;
}
.squad-chat-msg.mine .squad-chat-bubble {
  background: rgba(0,77,136,0.4);
  border-color: rgba(0,200,255,0.2);
}
.squad-chat-user {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.58rem; color: var(--accent);
  letter-spacing: 0.05em;
}
.squad-chat-text {
  font-size: 0.88rem; line-height: 1.4;
  color: var(--text);
}
.squad-chat-time {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.5rem; color: var(--dim);
}

/* Responsive — stack squad layout on mobile */
@media (max-width: 768px) {
  .squad-detail-layout { grid-template-columns: 1fr; }
  .squad-detail-right {
    position: static;
    height: 50vh;
  }
  .squad-detail-banner { height: 100px; }
}

/* Squad role select dropdown */
.squad-role-select {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.6rem;
  padding: 2px 6px;
  cursor: pointer;
  margin-left: auto;
}
.squad-role-select:hover { border-color: var(--accent); }

/* Squad kick button */
.squad-kick-btn {
  background: none;
  border: 1px solid rgba(255,34,68,0.3);
  border-radius: 3px;
  color: var(--red);
  font-size: 0.7rem;
  padding: 2px 6px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.squad-kick-btn:hover { background: rgba(255,34,68,0.1); border-color: var(--red); }

/* Squad post reactions row */
.squad-post-reactions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px 12px;
  flex-wrap: wrap;
}

/* Squad member info with joined date */
.squad-member-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.squad-member-joined {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.5rem;
  color: var(--dim);
  letter-spacing: 0.05em;
}

/* Squad card stats row */
.squad-card-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.squad-card-members, .squad-card-activity {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.6rem;
  color: var(--dim);
  letter-spacing: 0.05em;
}
.squad-card-activity { color: var(--green); }

/* Squad online count */
.squad-online-count {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.55rem;
  color: var(--dim);
  letter-spacing: 0.05em;
}

/* Squad chat count */
.squad-chat-count {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.55rem;
  color: var(--dim);
  letter-spacing: 0.05em;
}

/* ══════════════════════════════════════════════════════════════════
   NOTIFICATIONS
══════════════════════════════════════════════════════════════════ */
.notif-panel {
  position: fixed;
  top: 56px;
  right: 12px;
  width: 340px;
  max-height: 480px;
  background: var(--card);
  border: 1px solid rgba(30,45,61,0.5);
  border-radius: 4px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
  overflow: hidden;
}
.notif-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.notif-close {
  background: none; border: none; color: var(--dim); cursor: pointer; font-size: 1rem;
}
.notif-list {
  overflow-y: auto;
  flex: 1;
}
.notif-item {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  cursor: pointer;
  transition: background 0.15s;
}
.notif-item:hover { background: rgba(0,200,255,0.05); }
.notif-item.unread { background: rgba(0,200,255,0.08); border-left: 3px solid var(--accent); }
.notif-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.notif-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-user { font-size: 0.75rem; font-weight: 600; color: var(--text); }
.notif-msg { font-size: 0.7rem; color: var(--dim); }
.notif-time { font-size: 0.6rem; color: var(--dim); opacity: 0.6; }

/* ══════════════════════════════════════════════════════════════════
   REPORT BUTTON
══════════════════════════════════════════════════════════════════ */
.post-report {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.8rem;
  opacity: 0.3;
  transition: opacity 0.2s;
  padding: 4px;
}
.post-report:hover { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════
   EMAIL VERIFY BANNER
══════════════════════════════════════════════════════════════════ */
.verify-banner {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 16px;
  background: linear-gradient(90deg, rgba(255,106,0,0.15), rgba(0,200,255,0.15));
  border-bottom: 1px solid var(--border);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--accent);
}

/* ══════════════════════════════════════════════════════════════════
   ADMIN PANEL
══════════════════════════════════════════════════════════════════ */
.admin-report-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 10px;
}
.admin-report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.admin-report-type {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.75rem;
  color: var(--accent);
  letter-spacing: 0.05em;
}
.admin-report-time { font-size: 0.65rem; color: var(--dim); }
.admin-report-reason {
  font-size: 0.8rem;
  color: var(--text);
  padding: 8px 0;
  font-style: italic;
  opacity: 0.9;
}
.admin-report-by { font-size: 0.65rem; color: var(--dim); margin-bottom: 10px; }
.admin-report-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.admin-users-list { display: flex; flex-direction: column; gap: 6px; }
.admin-user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.admin-user-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.admin-user-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-user-name { font-size: 0.8rem; font-weight: 600; color: var(--text); }
.admin-user-email { font-size: 0.65rem; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-role {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  color: var(--accent);
  white-space: nowrap;
}
.admin-user-actions { flex-shrink: 0; }
.admin-role-select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.7rem;
  font-family: 'Share Tech Mono', monospace;
  cursor: pointer;
}

@media (max-width: 600px) {
  .notif-panel { left: 8px; right: 8px; width: auto; top: 52px; max-height: 60vh; }
  .verify-banner { font-size: 0.6rem; gap: 8px; padding: 6px 10px; flex-wrap: wrap; }
  .admin-user-row { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════════════
   SQUAD UPGRADES
══════════════════════════════════════════════════════════════════ */
.squad-card-stats {
  display: flex;
  gap: 12px;
  font-size: 0.65rem;
  color: var(--dim);
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: 0.05em;
  margin-top: 4px;
}
.squad-card-members { color: var(--accent); }
.squad-card-activity { color: var(--green, #39ff14); }

.squad-member-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.squad-member-joined {
  font-size: 0.6rem;
  color: var(--dim);
  opacity: 0.6;
}
.squad-online-count, .squad-chat-count {
  font-size: 0.6rem;
  color: var(--dim);
  font-weight: normal;
  letter-spacing: 0.05em;
}

/* Announcement box */
.squad-announce-box {
  margin-top: 16px;
  padding: 12px;
  background: rgba(255,106,0,0.06);
  border: 1px solid rgba(255,106,0,0.2);
  border-radius: 8px;
}
.squad-announce-input {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.squad-announce-input .btn-upload-inline {
  align-self: flex-end;
}

/* Announcement post style */
.post-card.squad-announcement {
  border-left: 3px solid rgba(255,106,0,0.7);
  background: rgba(255,106,0,0.04);
}
.squad-announce-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: #ff6a00;
  padding: 6px 14px 0;
  text-transform: uppercase;
}

/* Pinned post style */
.post-card.squad-pinned {
  border-left: 3px solid var(--accent);
  background: rgba(0,200,255,0.04);
}
.squad-pinned-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: var(--accent);
  padding: 6px 14px 0;
}

/* Pin button */
.squad-pin-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  opacity: 0.3;
  transition: opacity 0.2s, transform 0.2s;
  padding: 4px;
  margin-left: auto;
}
.squad-pin-btn:hover { opacity: 1; }
.squad-pin-btn.pinned { opacity: 1; transform: rotate(45deg); }

/* Chat avatar clickable */
.squad-chat-avatar { cursor: pointer; }
.squad-chat-avatar:hover { opacity: 0.8; }

/* Section title flex layout */
.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}

@media (max-width: 600px) {
  .squad-announce-box { padding: 8px; }
}

/* ══════════════════════════════════════════════════════════════════
   SEARCH
══════════════════════════════════════════════════════════════════ */
.search-bar {
  display: flex;
  gap: 10px;
  padding: 12px 0;
}
.search-input {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 14px;
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
}
.search-input:focus { border-color: var(--accent); }
.search-input::placeholder { color: var(--dim); }

.search-filters {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 6px 0 12px;
}
.search-stats {
  padding: 0 0 8px;
}
.search-stat-text {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--dim);
}

.search-users-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
}
.search-user-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.search-user-item:hover {
  border-color: var(--accent);
  background: rgba(0,200,255,0.04);
}
.search-user-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
}
.search-user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.search-user-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.8rem;
  color: var(--accent);
  letter-spacing: 0.05em;
}
.search-user-bio {
  font-size: 0.75rem;
  color: var(--dim);
}

/* ══════════════════════════════════════════════════════════════════
   DELETE ACCOUNT / DANGER ZONE
══════════════════════════════════════════════════════════════════ */
.profile-danger-zone {
  margin-top: 40px;
  padding: 20px;
  border: 1px solid rgba(255,34,68,0.2);
  border-radius: 8px;
  background: rgba(255,34,68,0.03);
}
.danger-zone-text {
  font-size: 0.85rem;
  color: var(--dim);
  margin-bottom: 14px;
}
.btn-danger {
  background: linear-gradient(135deg, #880000, #ff2244);
  border: none;
  border-radius: 4px;
  padding: 10px 24px;
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-danger:hover { box-shadow: 0 0 20px rgba(255,34,68,0.4); transform: translateY(-1px); }

.btn-secondary {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 24px;
  color: var(--text);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  text-align: center;
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

/* ══════════════════════════════════════════════════════════════════
   EDIT / COMMENT ACTIONS
══════════════════════════════════════════════════════════════════ */
.post-edit {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.8rem;
  opacity: 0.4;
  transition: opacity 0.2s;
  padding: 4px;
}
.post-edit:hover { opacity: 1; }

.comment-actions {
  display: flex;
  gap: 2px;
  margin-left: auto;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.2s;
}
.comment:hover .comment-actions { opacity: 1; }
.comment-action-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.65rem;
  opacity: 0.5;
  padding: 2px 4px;
  transition: opacity 0.2s;
}
.comment-action-btn:hover { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════
   FOLLOW BUTTON
══════════════════════════════════════════════════════════════════ */
.btn-follow {
  background: transparent;
  border: 1px solid var(--cyan);
  color: var(--cyan);
  padding: 6px 16px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-follow:hover { background: rgba(0,200,255,0.1); }
.btn-follow.following {
  background: rgba(0,200,255,0.15);
  border-color: var(--green);
  color: var(--green);
}
.pub-profile-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════════
   BOOKMARKS
══════════════════════════════════════════════════════════════════ */
.post-bookmark {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.5;
  transition: opacity 0.2s;
  margin-left: auto;
  padding: 2px 6px;
}
.post-bookmark:hover, .post-bookmark.bookmarked { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════
   POLLS
══════════════════════════════════════════════════════════════════ */
.poll-widget { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; }
.poll-option {
  position: relative;
  background: rgba(0,200,255,0.05);
  border: 1px solid rgba(0,200,255,0.15);
  color: var(--text);
  padding: 10px 14px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.8rem;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
  overflow: hidden;
}
.poll-option:hover { border-color: var(--cyan); background: rgba(0,200,255,0.1); }
.poll-option.my-vote { border-color: var(--green); }
.poll-option-text { position: relative; z-index: 1; }
.poll-option-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: rgba(0,200,255,0.12);
  transition: width 0.4s ease;
  z-index: 0;
}
.poll-option-pct {
  position: relative; z-index: 1;
  float: right;
  color: var(--cyan);
  font-size: 0.7rem;
}
.poll-total {
  font-size: 0.7rem;
  color: var(--dim);
  text-align: center;
  padding-top: 4px;
}
.dz-action-poll {
  border-color: rgba(147,51,234,0.3);
  background: rgba(147,51,234,0.05);
}
.dz-action-poll:hover { border-color: rgba(147,51,234,0.6); background: rgba(147,51,234,0.1); }

/* ══════════════════════════════════════════════════════════════════
   LEADERBOARD
══════════════════════════════════════════════════════════════════ */
.lb-section { margin-bottom: 24px; }
.lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(0,200,255,0.06);
  cursor: pointer;
  transition: background 0.15s;
}
.lb-row:hover { background: rgba(0,200,255,0.04); }
.lb-rank {
  font-size: 1rem;
  min-width: 28px;
  text-align: center;
  font-family: 'Share Tech Mono', monospace;
}
.lb-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(0,200,255,0.2);
}
.lb-name {
  flex: 1;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.8rem;
  color: var(--text);
}
.lb-stat {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.75rem;
  color: var(--cyan);
}
.lb-squad-tag {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.7rem;
  color: var(--orange);
}
.lb-empty {
  padding: 16px;
  text-align: center;
  color: var(--dim);
  font-size: 0.75rem;
}

/* ══════════════════════════════════════════════════════════════════
   BADGES
══════════════════════════════════════════════════════════════════ */
.badge-icons { display: inline-flex; gap: 2px; margin-left: 4px; }
.badge-icon {
  font-size: 0.75rem;
  cursor: help;
}
.badges-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.badge-card {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,200,255,0.06);
  border: 1px solid rgba(0,200,255,0.12);
  padding: 6px 12px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.7rem;
  color: var(--text);
}
.badge-card-icon { font-size: 1rem; }
.badge-card-label { letter-spacing: 0.05em; }
.badges-empty {
  font-size: 0.7rem;
  color: var(--dim);
  padding: 8px 0;
}
.pub-badges { margin-top: 8px; }

/* ══════════════════════════════════════════════════════════════════
   FEATURED CLIP OF THE WEEK
══════════════════════════════════════════════════════════════════ */
.featured-clip-wrap {
  margin: 0 0 20px;
  border: 1px solid rgba(255,180,0,0.25);
  background: rgba(255,180,0,0.03);
  padding: 0;
  overflow: hidden;
}
.featured-header {
  background: rgba(255,180,0,0.1);
  padding: 8px 16px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  color: #ffb347;
  border-bottom: 1px solid rgba(255,180,0,0.15);
}
.featured-post .post-card {
  border: none;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════
   KEYBOARD SHORTCUTS OVERLAY
══════════════════════════════════════════════════════════════════ */
.shortcuts-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.shortcuts-box {
  background: var(--card);
  border: 1px solid rgba(0,200,255,0.2);
  padding: 24px;
  min-width: 260px;
}
.shortcut-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.8rem;
  color: var(--text);
}
kbd {
  background: rgba(0,200,255,0.1);
  border: 1px solid rgba(0,200,255,0.25);
  padding: 2px 8px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.75rem;
  color: var(--cyan);
  min-width: 24px;
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════════
   ONLINE STATUS DOT
══════════════════════════════════════════════════════════════════ */
.online-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  margin-left: 4px;
  box-shadow: 0 0 4px var(--green);
}
.online-dot.offline {
  background: var(--dim);
  box-shadow: none;
}

/* ══════════════════════════════════════════════════════════════════
   THEME TOGGLE
══════════════════════════════════════════════════════════════════ */
.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--dim);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
}

/* Smooth theme transition */
body, .navbar, .post-card, .sidebar, .modal-box, .main-content, .toast {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ══════════════════════════════════════════════════════════════════
   WAR STORIES — mission debrief on posts
══════════════════════════════════════════════════════════════════ */
.war-story-block {
  margin: 0 20px 10px;
  padding: 12px 16px;
  background: rgba(0,200,255,0.03);
  border: 1px solid rgba(0,200,255,0.1);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
}
.ws-header {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: var(--accent);
  margin-bottom: 8px;
}
.ws-row {
  display: flex;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(0,200,255,0.05);
}
.ws-row:last-child { border-bottom: none; }
.ws-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--dim);
  min-width: 80px;
  flex-shrink: 0;
}
.ws-val {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════════════
   CLIP CHAINS
══════════════════════════════════════════════════════════════════ */
.chain-clip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
  padding: 8px 0;
}
.chain-thumb {
  position: relative;
  border: 2px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s;
  aspect-ratio: 16/9;
}
.chain-thumb:hover { border-color: var(--accent); }
.chain-thumb.selected { border-color: var(--accent); box-shadow: 0 0 12px rgba(0,200,255,0.3); }
.chain-thumb img { width: 100%; height: 100%; object-fit: cover; }
.chain-thumb-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.7);
  padding: 3px 6px;
  font-size: 0.6rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chain-thumb-num {
  position: absolute; top: 4px; right: 4px;
  background: var(--accent);
  color: #000;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.chain-selected-list { display: flex; flex-direction: column; gap: 6px; }
.chain-sel-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: rgba(0,200,255,0.04);
  border: 1px solid rgba(0,200,255,0.1);
  border-radius: 4px;
}
.chain-sel-num {
  background: var(--accent);
  color: #000;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.chain-sel-caption { font-size: 0.85rem; color: var(--text); flex: 1; }
.chain-label-input {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 4px 8px;
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.8rem;
  width: 140px;
}

/* Chain timeline view */
.chain-timeline { display: flex; flex-direction: column; gap: 0; }
.chain-step { display: flex; gap: 16px; }
.chain-step-marker {
  display: flex; flex-direction: column; align-items: center;
  flex-shrink: 0;
}
.chain-step-num {
  background: var(--accent);
  color: #000;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.chain-step-line {
  width: 2px; flex: 1; min-height: 20px;
  background: linear-gradient(var(--accent), rgba(0,200,255,0.1));
}
.chain-step-content {
  flex: 1;
  padding-bottom: 20px;
}
.chain-step-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 6px;
}
.chain-media {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.chain-step-caption {
  font-size: 0.88rem;
  color: var(--dim);
  margin-top: 6px;
}

/* Chain cards on profile */
.chain-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  margin-bottom: 8px;
}
.chain-card:hover { background: rgba(0,200,255,0.04); border-left-color: var(--accent2); }
.chain-card-icon { font-size: 1.3rem; }
.chain-card-info { flex: 1; }
.chain-card-title { font-weight: 600; font-size: 0.95rem; display: block; }
.chain-card-meta { font-size: 0.75rem; color: var(--dim); font-family: 'Share Tech Mono', monospace; }
.chain-card-arrow { color: var(--dim); font-size: 1.1rem; }

/* ══════════════════════════════════════════════════════════════════
   THE VAULT
══════════════════════════════════════════════════════════════════ */
.vault-days-btn {
  background: rgba(0,200,255,0.05);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 6px 12px;
  color: var(--dim);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.65rem;
  cursor: pointer;
  transition: all 0.2s;
}
.vault-days-btn:hover, .vault-days-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0,200,255,0.1);
}
.vault-item {
  display: flex; gap: 14px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 8px;
}
.vault-locked { border-left: 3px solid var(--accent2); }
.vault-unlocked { border-left: 3px solid var(--green); }
.vault-icon { font-size: 1.5rem; flex-shrink: 0; }
.vault-info { flex: 1; }
.vault-timer {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--accent2);
  margin-bottom: 4px;
}
.vault-meta { font-size: 0.75rem; color: var(--dim); font-family: 'Share Tech Mono', monospace; }
.vault-msg {
  font-style: italic;
  color: var(--text);
  font-size: 0.88rem;
  margin-top: 6px;
  padding-left: 10px;
  border-left: 2px solid var(--border);
}
.vault-media {
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  border-radius: 4px;
  border: 1px solid var(--border);
  margin-top: 8px;
}
.vault-caption { font-size: 0.88rem; color: var(--dim); margin-top: 6px; }

/* ══════════════════════════════════════════════════════════════════
   CALLOUTS
══════════════════════════════════════════════════════════════════ */
.callout-card {
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 8px;
}
.callout-pending { border-left: 3px solid var(--accent2); }
.callout-completed { border-left: 3px solid var(--green); }
.callout-expired { border-left: 3px solid var(--dim); opacity: 0.7; }
.callout-header {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.callout-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  object-fit: cover;
}
.callout-from { font-weight: 600; color: var(--accent); }
.callout-time { font-size: 0.7rem; color: var(--dim); font-family: 'Share Tech Mono', monospace; }
.callout-status-badge {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  border-radius: 3px;
  margin-left: auto;
}
.callout-status-pending { background: rgba(255,106,0,0.15); color: var(--accent2); }
.callout-status-completed { background: rgba(57,255,20,0.15); color: var(--green); }
.callout-status-expired { background: rgba(74,96,112,0.15); color: var(--dim); }
.callout-msg {
  font-style: italic;
  color: var(--text);
  font-size: 0.92rem;
  margin-top: 8px;
  padding-left: 10px;
  border-left: 2px solid var(--accent2);
}
.callout-clip {
  font-size: 0.8rem;
  color: var(--dim);
  margin-top: 6px;
}
.callout-response-link {
  color: var(--accent);
  font-size: 0.8rem;
  cursor: pointer;
  margin-top: 6px;
}
.callout-response-link:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════
   PROFILE CUSTOMIZATION
══════════════════════════════════════════════════════════════════ */
.accent-picker-grid {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 6px 0;
}
.accent-swatch {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
}
.accent-swatch:hover { transform: scale(1.15); }
.accent-swatch.active {
  border-color: #fff;
  box-shadow: 0 0 12px currentColor;
  transform: scale(1.15);
}

/* ── PROFILE GALLERY ── */
.gallery-section { padding: 0 0 20px; }
.gallery-actions {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0 14px;
}
.gallery-count {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--dim);
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.gallery-item {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1;
  background: var(--bg3);
  transition: transform 0.2s, box-shadow 0.2s;
}
.gallery-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,200,255,0.15);
}
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 6px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gallery-delete {
  position: absolute; top: 4px; right: 4px;
  background: rgba(0,0,0,0.6);
  border: none; border-radius: 50%;
  width: 24px; height: 24px;
  color: var(--red); font-size: 0.7rem;
  cursor: pointer;
  display: none;
  align-items: center; justify-content: center;
  transition: background 0.2s;
}
.gallery-item:hover .gallery-delete { display: flex; }
.gallery-delete:hover { background: rgba(255,34,68,0.3); }

@media (max-width: 600px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .gallery-item { border-radius: 4px; }
}

/* Post action buttons (war story, callout) */
.post-action-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 2px 4px;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.post-action-btn:hover { opacity: 1; }