@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600;700&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  /* ── Backgrounds — deeper & richer like check.php ── */
  --bg:      #05070F;
  --surf-1:  #0A0E1A;
  --surf-2:  #0F1525;
  --surf-3:  #161E30;
  --surf-4:  #1D2640;
  --line:    rgba(255,255,255,0.05);
  --line-md: rgba(255,255,255,0.10);
  --line-hi: rgba(255,255,255,0.18);

  /* ── Violet — primary accent (from check.php) ── */
  --violet:     #7C3AFF;
  --violet-2:   #A56FFF;
  --violet-dim: rgba(124,58,255,0.12);
  --violet-bd:  rgba(124,58,255,0.35);
  --violet-glow: 0 0 32px rgba(124,58,255,0.4);

  /* ── Lime — secondary / online status ── */
  --lime:      #39FF14;
  --lime-2:    #7FFF00;
  --lime-dim:  rgba(57,255,20,0.10);
  --lime-bd:   rgba(57,255,20,0.28);
  --lime-glow: 0 0 20px rgba(57,255,20,0.35), 0 0 60px rgba(57,255,20,0.10);

  /* ── Cyan — info / highlight ── */
  --cyan:     #00E5FF;
  --cyan-2:   #38EFFF;
  --cyan-dim: rgba(0,229,255,0.10);
  --cyan-bd:  rgba(0,229,255,0.30);
  --cyan-glow: 0 0 24px rgba(0,229,255,0.35);

  /* ── Gold / Amber — warning / rank ── */
  --gold:     #FFB800;
  --gold-dim: rgba(255,184,0,0.10);
  --gold-bd:  rgba(255,184,0,0.30);

  /* ── Red — danger / offline ── */
  --red:     #FF2D55;
  --red-dim: rgba(255,45,85,0.12);
  --red-bd:  rgba(255,45,85,0.30);

  /* ── Text ── */
  --ink-0: #F0F4FF;
  --ink-1: #B8C6E8;
  --ink-2: #7A8CB0;
  --ink-3: #445070;

  /* ── Fonts ── */
  --f-head: 'Lexend', sans-serif;
  --f-body: 'Lexend', sans-serif;
  --f-mono: 'JetBrains Mono', monospace;

  /* ── Radii ── */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* ── Motion ── */
  --ease: cubic-bezier(.22,1,.36,1);
  --fast: .15s ease;
  --mid:  .25s ease;
}


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

body {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  background: var(--bg);
  color: var(--ink-1);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  transition: background .3s, color .3s;
}

body.menu-open { overflow: hidden; }
a { color: var(--cyan); text-decoration: none; }
a:hover { opacity: .75; }

::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surf-4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--violet-bd); }

#ambient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
#ambient::before {
  content: ''; position: absolute;
  width: 900px; height: 900px; top: -300px; left: -200px;
  background: radial-gradient(ellipse 700px 500px at 15% 0%, rgba(124,58,255,.18) 0%, transparent 70%);
  animation: drift1 18s ease-in-out infinite alternate;
}
#ambient::after {
  content: ''; position: absolute;
  width: 700px; height: 700px; bottom: -200px; right: -100px;
  background: radial-gradient(ellipse 600px 400px at 85% 100%, rgba(0,229,255,.12) 0%, transparent 70%);
  animation: drift2 16s ease-in-out infinite alternate;
}
@keyframes drift1 { to { transform: translate(20px, 30px) scale(1.04); } }
@keyframes drift2 { to { transform: translate(-50px, -60px) scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
  #ambient::before, #ambient::after { animation: none; }
}

.badge {
  display: inline-flex; align-items: center;
  padding: 4px 11px; border-radius: 999px;
  font-family: var(--f-head); font-weight: 700; font-size: 11.5px;
  letter-spacing: .04em; white-space: nowrap; flex-shrink: 0;
}
.badge-lime    { background: var(--lime-dim);   border: 1px solid var(--lime-bd);   color: var(--lime); }
.badge-violet  { background: var(--violet-dim); border: 1px solid var(--violet-bd); color: var(--violet-2); }
.badge-gold    { background: var(--gold-dim);   border: 1px solid var(--gold-bd);   color: var(--gold); }
.badge-cyan    { background: var(--cyan-dim);   border: 1px solid var(--cyan-bd);   color: var(--cyan); }
.badge-muted   { background: var(--surf-3);     border: 1px solid var(--line);      color: var(--ink-2); }

@keyframes pulse      { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.7)} }
@keyframes cardIn    { from { opacity:0; transform:translateY(16px) } to { opacity:1; transform:translateY(0) } }
@keyframes sectionIn { from { opacity:0; transform:translateY(12px) } to { opacity:1; transform:translateY(0) } }
@keyframes fadeUp    { from { opacity:0; transform:translateY(5px)  } to { opacity:1; transform:translateY(0) } }
@keyframes fadeIn    { from { opacity:0 } to { opacity:1 } }