:root {
 --bg: #0f172a;
 --card-bg: #1e293b;
 --primary: #38bdf8;
 --text: #f1f5f9;
 --text-dim: #94a3b8;
 --border: #334155;
 --rainbow-grad: linear-gradient(
  to right,
  #ff0000,
  #ff8000,
  #ffff00,
  #00ff00,
  #00ffff,
  #0000ff,
  #8000ff,
  #ff0080,
  #ff0000
 );
 --fire-grad: linear-gradient(45deg, #7f1d1d, #ef4444, #f97316);
 --future-grad: linear-gradient(45deg, #1e3a8a, #3b82f6, #60a5fa);
}
body {
 font-family: Inter, sans-serif;
 background-color: var(--bg);
 color: var(--text);
 margin: 0;
 padding: 0;
}
.card {
 background: var(--card-bg);
 border-radius: 12px;
 border: 1px solid var(--border);
 transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
 position: relative;
 overflow: hidden;
 z-index: 1;
}
.card:hover {
 transform: translateY(-5px);
 border-color: var(--primary);
 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}
.card-rainbow {
 border: 1px solid transparent !important;
 background-image: linear-gradient(var(--card-bg), var(--card-bg)),
  var(--rainbow-grad);
 background-origin: border-box;
 background-clip: padding-box, border-box;
 background-size: 200% 100%;
 animation: bg-shift 4s linear infinite;
 box-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
}
.rainbow-text {
  background: var(--rainbow-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% auto;
  animation: bg-shift 4s linear infinite;
  font-weight: 800;
}
.glow-rainbow {
 background: var(--rainbow-grad);
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
 background-size: 200% auto;
 animation: bg-shift 4s linear infinite;
 font-weight: 800;
 position: relative;
 display: inline-block;
}
.glow-rainbow::after {
 content: "";
 position: absolute;
 inset: 0;
 background: url(https://vacban.wtf/uploads/sparkles/sparkle_white.gif) repeat;
 background-size: 33px 33px;
 pointer-events: none;
 opacity: 1;
 filter: brightness(1.5) contrast(1.2);
 z-index: 1;
 mix-blend-mode: screen;
}
.card-fire {
 border: 1px solid #ef4444 !important;
 box-shadow: 0 0 10px rgba(239, 68, 68, 0.2),
  inset 0 0 20px rgba(239, 68, 68, 0.1);
 animation: fire-pulse 2s infinite;
}
.glow-fire {
 color: #fa0;
 text-shadow: 0 0 4px #ff4500, 0 -2px 4px #ffae00, 0 -5px 10px red;
 animation: text-flicker 0.3s infinite alternate;
 font-weight: 800;
}
.card-future {
 border: 1px solid #3b82f6 !important;
 box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);
}
.card-future::before {
 content: "";
 position: absolute;
 top: 0;
 left: -100%;
 width: 50%;
 height: 100%;
 background: linear-gradient(
  to right,
  transparent,
  rgba(255, 255, 255, 0.1),
  transparent
 );
 transform: skewX(-25deg);
 animation: glint-sweep 3s infinite;
 z-index: 2;
 pointer-events: none;
}
.effect-terminal::after {
 content: " ";
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
  linear-gradient(
   90deg,
   rgba(255, 0, 0, 0.06),
   rgba(0, 255, 0, 0.02),
   rgba(0, 0, 255, 0.06)
  );
 background-size: 100% 4px, 3px 100%;
 pointer-events: none;
 z-index: 2;
}
@keyframes bg-shift {
 to {
  background-position: 200% center;
 }
}
@keyframes fire-pulse {
 0%,
 100% {
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
  border-color: #991b1b;
 }
 50% {
  box-shadow: 0 0 25px rgba(239, 68, 68, 0.5);
  border-color: #ef4444;
 }
}
@keyframes text-flicker {
 0% {
  opacity: 1;
 }
 100% {
  opacity: 0.85;
 }
}
@keyframes glint-sweep {
 0% {
  left: -100%;
 }
 100%,
 20% {
  left: 200%;
 }
}
.tag-base {
 font-size: 0.75rem;
 padding: 4px 8px;
 border-radius: 4px;
 background: #334155;
 text-transform: uppercase;
 font-weight: 700;
}
.status-undetected {
 color: #4ade80;
}
.badge-private {
 background-color: #450a0a;
 color: #f87171;
}
.badge-public {
 background-color: #1e3a8a;
 color: #60a5fa;
}
.btn-visit {
 background: var(--primary);
 color: var(--bg);
 transition: opacity 0.2s;
}
.btn-visit:hover {
 opacity: 0.9;
}