:root {
  --bg: #0b0f17;
  --surface: #161b26;
}
* { font-family: 'Vazirmatn', Tahoma, sans-serif; }
.font-mono, table, .font-mono * {
  font-family: 'JetBrains Mono', 'Vazirmatn', monospace;
  font-feature-settings: "tnum";
}
body {
  margin: 0;
  background:
    radial-gradient(circle at 15% 10%, rgba(16,185,129,0.08), transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(34,211,238,0.07), transparent 40%),
    linear-gradient(180deg, #0b0f17 0%, #0a0d14 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

.card {
  background: linear-gradient(180deg, rgba(22,27,38,0.9), rgba(18,22,31,0.9));
  border: 1px solid rgba(148,163,184,0.1);
  border-radius: 1rem;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
}

.pill {
  padding: 0.5rem 0.9rem;
  border-radius: 0.75rem;
  background: rgba(30,41,59,0.6);
  border: 1px solid rgba(148,163,184,0.12);
  color: #cbd5e1;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.2s;
  cursor: pointer;
}
.pill:hover { background: rgba(51,65,85,0.7); }
.pill-active {
  background: linear-gradient(135deg, rgba(16,185,129,0.25), rgba(34,211,238,0.2));
  border-color: rgba(16,185,129,0.5);
  color: #6ee7b7;
  box-shadow: 0 0 0 1px rgba(16,185,129,0.3), 0 0 16px rgba(16,185,129,0.15);
}

.spinner {
  width: 34px; height: 34px;
  border: 3px solid rgba(148,163,184,0.2);
  border-top-color: #10b981;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.conf-pulse { animation: confglow 2.5s ease-in-out infinite; }
@keyframes confglow {
  0%,100% { filter: brightness(1); }
  50% { filter: brightness(1.2); }
}

.fade-up { animation: fadeUp 0.4s ease-out; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.flash-win { animation: flashWin 1s ease-out; }
@keyframes flashWin {
  0% { box-shadow: 0 0 0 2px rgba(16,185,129,0.8); }
  100% { box-shadow: 0 8px 30px rgba(0,0,0,0.35); }
}
.flash-loss { animation: flashLoss 0.6s ease-out; }
@keyframes flashLoss {
  0%,50% { transform: translateX(-4px); box-shadow: 0 0 0 2px rgba(244,63,94,0.7); }
  25%,75% { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

table th { white-space: nowrap; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.25); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }