@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

:root {
  --pl-purple: #3d195b;
  --pl-green: #00ff85;
  --pl-white: #ffffff;
  --pl-pink: #ff005a;
  --pl-dark: #111111;
  --pl-slate: #f4f4f4;
  
  --fc-black: #000000;
  --fc-green: #00ff00;
  --fc-triangle: #1a1a1a;
}

body {
  background-color: var(--pl-purple);
  color: var(--pl-white);
  font-family: 'Inter', sans-serif;
  margin: 0;
  min-height: 100vh;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--pl-purple); }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--pl-green); }

.text-pl-green { color: var(--pl-green); }
.bg-pl-green { background-color: var(--pl-green); }
.border-pl-green { border-color: var(--pl-green); }

.text-pl-purple { color: var(--pl-purple); }
.bg-pl-purple { background-color: var(--pl-purple); }

.nav-link.active {
  color: var(--pl-green);
  border-bottom: 4px solid var(--pl-green);
}

.glass-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

.pl-card {
  background: var(--pl-white);
  color: var(--pl-dark);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.pl-table-header {
  background-color: var(--pl-slate);
  color: var(--pl-purple);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
}

@keyframes pulse-live {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.animate-live {
  animation: pulse-live 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* FC Specific Elements */
.fc-triangle-bg {
  background-image: linear-gradient(45deg, var(--fc-triangle) 25%, transparent 25%), 
                    linear-gradient(-45deg, var(--fc-triangle) 25%, transparent 25%), 
                    linear-gradient(45deg, transparent 75%, var(--fc-triangle) 75%), 
                    linear-gradient(-45deg, transparent 75%, var(--fc-triangle) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}