/* assets/css/main.css - NexHub - Unified */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&family=Geist+Mono:wght@400;500&display=swap');

:root {
  --nex-red: #990000;
  --nex-black: #000000;
  --nex-card: #131313;
  --nex-card-hover: #181818;
  --nex-border: #222222;
  --nex-border-hover: #2e2e2e;
  --nex-text: #ffffff;
  --nex-muted: #888888;
  --nex-muted2: #555555;
  --nex-indigo: #6366f1;
  --nex-discord: #5865F2;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { background: var(--nex-black) !important; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--nex-black) !important;
  color: var(--nex-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: 'Geist Mono', monospace; }

/* Buttons - pill, like directory */
.btn-white {
  background: #fff; color:#000;
  padding:11px 22px; border-radius:999px;
  font-size:12px; font-weight:900;
  text-decoration:none; display:inline-flex; align-items:center;
  transition: all .15s;
}
.btn-white:hover { background:#e5e5e5; transform:translateY(-1px); }
.btn-dark {
  background:#1a1a1a; color:#fff; border:1px solid var(--nex-border);
  padding:11px 22px; border-radius:999px;
  font-size:12px; font-weight:800; text-decoration:none;
  display:inline-flex; align-items:center;
}
.btn-dark:hover { background:#222; border-color:#333; }
.btn-discord { background:var(--nex-discord); color:#fff; }

/* Global page wrapper */
.nex-wrap { max-width:1200px; margin:0 auto; padding:0 24px; }

/* Hub Card - THE style you liked */
.nex-hub-card {
  background: var(--nex-card);
  border:1px solid var(--nex-border);
  border-radius:20px;
  overflow:hidden;
  transition: all .2s ease;
  position:relative;
}
.nex-hub-card:hover {
  border-color: var(--nex-border-hover);
  background: var(--nex-card-hover);
  transform: translateY(-2px);
}
.nex-hub-banner {
  height:160px; background:#0a0a0a;
  position:relative; overflow:hidden;
}
.nex-hub-banner-bg {
  width:100%; height:100%; object-fit:cover;
  filter:blur(25px); opacity:0.6; transform:scale(1.1);
}
.nex-hub-banner-grad {
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(99,102,241,0.3), rgba(153,0,0,0.3)), linear-gradient(to top, #131313, transparent);
}
.nex-hub-badge {
  position:absolute; top:12px; left:12px; right:12px;
  display:flex; justify-content:space-between;
}
.nex-badge-live {
  background:#00ff88; color:#000; font-size:10px; font-weight:900;
  padding:5px 10px; border-radius:999px;
}
.nex-badge-meta {
  background:rgba(0,0,0,0.7); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.1); color:#fff;
  font-size:10px; padding:5px 10px; border-radius:999px;
}

/* Hero */
.nex-hero { padding:80px 0 60px; }
.nex-hero h1 { font-size:48px; font-weight:900; letter-spacing:-1.5px; line-height:0.9; }
.nex-hero h1 span { color:#333; }
.nex-hero-sub { color:var(--nex-muted); font-size:14px; margin-top:12px; line-height:1.6; max-width:480px; }

/* Keep old for compat */
.glass { background: rgba(18,18,24,0.85); backdrop-filter: blur(12px); border: 1px solid var(--nex-border); }
.card { background: var(--nex-card); border:1px solid var(--nex-border); border-radius:16px; padding:22px; }
.server-card { background: var(--nex-card); border:1px solid var(--nex-border); border-radius:14px; }

.hidden { display:none !important; }
#user-menu { position:relative; }
#user-dropdown {
  position:absolute; right:0; top:calc(100% + 10px);
  min-width:200px;
  background:#0f0f0f; border:1px solid #222;
  border-radius:14px; backdrop-filter:blur(16px);
  box-shadow:0 20px 40px rgba(0,0,0,0.6);
  z-index:100;
}