@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/JetBrainsMono-400.ttf') format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/JetBrainsMono-500.ttf') format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/JetBrainsMono-700.ttf') format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/JetBrainsMono-800.ttf') format('truetype');
}

:root {
  --bg-primary: #05070b;
  --bg-secondary: #0b111a;
  --bg-tertiary: #162335;
  --text-primary: #e2e8f0;
  --text-secondary: #64748b;
  --border-color: #162335;
  --accent-cyan: #00e5ff;
  --accent-green: #00ff66;
  --accent-amber: #ffaa00;
  --accent-red: #ff2255;
}

.light-theme {
  --bg-primary: #f1f5f9;
  --bg-secondary: #ffffff;
  --bg-tertiary: #e2e8f0;
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --border-color: #cbd5e1;
  --accent-cyan: #0891b2;
  --accent-green: #059669;
  --accent-amber: #d97706;
  --accent-red: #dc2626;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
* {
  font-family: 'JetBrains Mono', monospace !important;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.4;
}

/* Light theme overrides */
.light-theme .bg-darkBg { background-color: var(--bg-primary); }
.light-theme .bg-darkCard { background-color: var(--bg-secondary); }
.light-theme .bg-darkCard\/40 { background-color: rgba(255,255,255,0.7); }
.light-theme .bg-darkCard\/50 { background-color: rgba(255,255,255,0.8); }
.light-theme .bg-darkCard\/30 { background-color: rgba(255,255,255,0.6); }
.light-theme .bg-black { background-color: var(--bg-secondary); }
.light-theme .bg-black\/40 { background-color: rgba(255,255,255,0.7); }
.light-theme .bg-black\/60 { background-color: rgba(255,255,255,0.85); }
.light-theme .bg-black\/70 { background-color: rgba(255,255,255,0.9); }
.light-theme .bg-slate-900\/70 { background-color: rgba(226, 232, 240, 0.9); }
.light-theme .bg-darkBg\/30 { background-color: rgba(241, 245, 249, 0.7); }
.light-theme .bg-darkBg\/60 { background-color: rgba(241, 245, 249, 0.9); }
.light-theme .bg-darkBg\/80 { background-color: rgba(241, 245, 249, 0.95); }
.light-theme .bg-panelBorder\/40 { background-color: rgba(203, 213, 225, 0.6); }
.light-theme .bg-panelBorder\/20 { background-color: rgba(203, 213, 225, 0.3); }
.light-theme .bg-hackCyan\/5 { background-color: rgba(8, 145, 178, 0.1); }
.light-theme .bg-hackGreen\/5 { background-color: rgba(5, 150, 105, 0.1); }
.light-theme .bg-hackRed\/10 { background-color: rgba(220, 38, 38, 0.15); }
.light-theme .bg-hackRed\/20 { background-color: rgba(220, 38, 38, 0.25); }
.light-theme .bg-hackGreen\/10 { background-color: rgba(5, 150, 105, 0.2); }
.light-theme .bg-hackAmber\/5 { background-color: rgba(217, 119, 6, 0.1); }
.light-theme .bg-hackCyan\/10 { background-color: rgba(8, 145, 178, 0.15); }
.light-theme .bg-hackCyan\/15 { background-color: rgba(8, 145, 178, 0.2); }

.light-theme .border-panelBorder { border-color: var(--border-color); }
.light-theme .border-panelBorder\/60 { border-color: rgba(203, 213, 225, 0.8); }
.light-theme .border-panelBorder\/70 { border-color: rgba(203, 213, 225, 0.9); }
.light-theme .border-panelBorder\/40 { border-color: rgba(203, 213, 225, 0.5); }
.light-theme .border-panelBorder\/80 { border-color: rgba(203, 213, 225, 0.9); }
.light-theme .border-panelBorder\/30 { border-color: rgba(203, 213, 225, 0.4); }
.light-theme .border-panelBorder\/50 { border-color: rgba(203, 213, 225, 0.7); }

.light-theme .text-slate-300 { color: var(--text-primary); }
.light-theme .text-slate-400 { color: var(--text-secondary); }
.light-theme .text-slate-500 { color: #475569; }
.light-theme .text-slate-600 { color: #64748b; }
.light-theme .text-white { color: var(--text-primary); }
.light-theme .text-slate-200 { color: var(--text-primary); }
.light-theme .hover\:text-slate-200:hover { color: var(--text-primary); }
.light-theme .hover\:bg-panelBorder\/20:hover { background-color: rgba(203, 213, 225, 0.4); }
.light-theme .hover\:bg-panelBorder\/30:hover { background-color: rgba(203, 213, 225, 0.5); }
.light-theme .hover\:bg-panelBorder\/80:hover { background-color: rgba(203, 213, 225, 0.9); }

.light-theme .text-hackCyan { color: var(--accent-cyan); }
.light-theme .text-hackGreen { color: var(--accent-green); }
.light-theme .text-hackRed { color: var(--accent-red); }
.light-theme .text-hackAmber { color: var(--accent-amber); }
.light-theme .bg-hackCyan { background-color: var(--accent-cyan); }
.light-theme .bg-hackGreen { background-color: var(--accent-green); }
.light-theme .bg-hackRed { background-color: var(--accent-red); }
.light-theme .bg-hackAmber { background-color: var(--accent-amber); }
.light-theme .border-hackCyan { border-color: var(--accent-cyan); }
.light-theme .border-hackGreen { border-color: var(--accent-green); }
.light-theme .border-hackRed { border-color: var(--accent-red); }
.light-theme .border-hackAmber { border-color: var(--accent-amber); }
.light-theme .hover\:text-hackCyan:hover { color: var(--accent-cyan); }
.light-theme .hover\:text-hackGreen:hover { color: var(--accent-green); }
.light-theme .hover\:text-hackRed:hover { color: var(--accent-red); }
.light-theme .hover\:bg-hackCyan\/10:hover { background-color: rgba(8, 145, 178, 0.2); }
.light-theme .hover\:bg-hackGreen\/15:hover { background-color: rgba(5, 150, 105, 0.2); }
.light-theme .hover\:bg-hackRed\/10:hover { background-color: rgba(220, 38, 38, 0.15); }
.light-theme .hover\:bg-hackAmber\/10:hover { background-color: rgba(217, 119, 6, 0.15); }
.light-theme .hover\:bg-hackCyan\/15:hover { background-color: rgba(8, 145, 178, 0.25); }

.light-theme input,
.light-theme select,
.light-theme textarea {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

/* scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-cyan); }

/* tabs */
.tab-content { display: none; }
.tab-content.active { display: block; }

/* glow */
@keyframes pulseGlow { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.35; } }
.glow-bg { animation: pulseGlow 4s infinite ease-in-out; }

/* spinners */
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.scan-btn-loader {
  width: 1rem; height: 1rem;
  border: 2px solid rgba(0,0,0,0.1);
  border-left-color: #05070b; border-top-color: #05070b;
  border-right-color: #00e5ff; border-bottom-color: #00e5ff;
  border-radius: 9999px;
  animation: spin 0.8s linear infinite;
}
.fg-loader {
  width: 12px; height: 12px;
  border: 2px solid var(--border-color);
  border-top-color: var(--accent-cyan);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  display: inline-block;
}
.fg-loading { opacity: 0.5; pointer-events: none; }

/* captcha */
.captcha-puzzle-btn:hover { border-color: var(--accent-cyan); }

/* score bars */
.score-bar { transition: width 1s cubic-bezier(0.4, 0, 0.2, 1); }

/* mobile menu */
#mobile-menu-backdrop { transition: opacity 0.2s ease; }
#mobile-more-menu { max-height: 68vh; overflow-y: auto; }
#mobile-more-menu button { width: 100%; text-align: left; }
body.no-scroll { overflow: hidden; }

/* transitions */
.fear-greed-transition { transition: all 0.5s ease; }

/* responsive */
@media (max-width: 767px) {
  .btn-group { flex-wrap: wrap; }
  .btn-group button { flex: 1 0 auto; min-width: 0; }

  .light-theme [data-tab-btn].mobile-active-tab {
    background: rgba(203, 213, 225, 0.9) !important;
    color: #1e293b !important;
  }
}

.spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0, 229, 255, 0.3);
    border-top-color: #00e5ff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }