/* ═══════════════════════════════════════════════════════════════
   DARKNET WEB PANEL — ELITE EDITION
   Theme: Anime Cyberpunk Pink Neon
   ═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400&family=Share+Tech+Mono&family=Orbitron:wght@400;500;600;700;800;900&display=swap');

/* ─── CSS Custom Properties ─── */
:root {
  /* Deep Space Backgrounds */
  --bg:    #06000f;
  --bg2:   #0a0018;
  --bg3:   #100022;
  --bg4:   #160030;
  --bg5:   #1c003e;

  /* Primary: Neon Pink System */
  --gold:     #ff2d78;
  --gold2:    #ff6b9d;
  --gold3:    #ffb3cc;
  --gold4:    #ffd6e7;
  --gold-dim: rgba(255, 45, 120, 0.14);
  --gold-glow:rgba(255, 45, 120, 0.35);

  /* Secondary: Cyber Magenta / Violet */
  --amber:    #d946ef;
  --copper:   #9333ea;

  /* Status Colors (preserved) */
  --rose:  #ff4560;
  --mint:  #00e5a0;
  --sky:   #38bdf8;
  --lilac: #c084fc;
  --lime:  #a3e635;

  /* Text */
  --text: #f5e0f0;
  --sub:  #c87aaa;
  --dim:  #8a5580;

  /* Borders */
  --border:  rgba(255, 45, 120, 0.22);
  --border2: rgba(255, 45, 120, 0.45);

  /* Radius tokens */
  --r8:  8px;
  --r12: 12px;
  --r16: 16px;
  --r20: 20px;

  /* Glow System */
  --glow-sm:  0 0 12px rgba(255, 45, 120, 0.4);
  --glow-md:  0 0 28px rgba(255, 45, 120, 0.5);
  --glow-lg:  0 0 60px rgba(255, 45, 120, 0.35);
  --glow-xl:  0 0 100px rgba(255, 45, 120, 0.25);

  /* Gradients */
  --grad-pink:    linear-gradient(135deg, #ff2d78, #d946ef);
  --grad-pink2:   linear-gradient(135deg, #ff6b9d, #ff2d78, #d946ef);
  --grad-dark:    linear-gradient(145deg, var(--bg3), var(--bg2));
  --grad-card:    linear-gradient(145deg, rgba(22,0,48,.95), rgba(10,0,24,.98));

  /* Holographic Foil */
  --holo: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 45, 120, 0.08) 45%,
    rgba(217, 70, 239, 0.10) 50%,
    rgba(147, 51, 234, 0.08) 55%,
    transparent 60%
  );

  /* Transitions */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── Reset & Base ─── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
}

body {
  color: var(--text);
  font-family: 'Exo 2', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Custom Scrollbar ─── */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--dim);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--sub); }

/* ─── Utility Classes ─── */
.gold-word {
  background: linear-gradient(90deg, #ff2d78, #ff6b9d, #d946ef, #ff2d78);
  background-size: 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 2.5s linear infinite;
}

.gold-grad {
  background: linear-gradient(90deg, #ff2d78, #ff6b9d, #d946ef);
  background-size: 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

.tb-gl {
  background: linear-gradient(90deg, #ff2d78, #ff6b9d, #d946ef, #ff2d78);
  background-size: 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3.5s linear infinite;
}

.gold-spin {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--gold);
  border-right-color: var(--amber);
  animation: spin 0.8s linear infinite;
}