/* ───────────────────────────────────────────────────────────────────
   Zynth "Industrial Minimalism" theme
   Green-tinted true-deep, sharp corners, hairline borders, scan line
   ─────────────────────────────────────────────────────────────────── */

html, body {
  background-color: #0c160e;
  color: #dae6d8;
}
body {
  font-family: 'Inter', system-ui, sans-serif;
  font-feature-settings: 'ss01' on;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Persistent 24px grid lattice (the "infrastructure" hum) */
.bg-lattice {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(to right,  rgba(132,149,133,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(132,149,133,0.05) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* CRT scan-line overlay for terminal mocks */
.scan-line {
  background: linear-gradient(to bottom, transparent 50%, rgba(0,255,136,0.03) 51%, transparent 100%);
  background-size: 100% 4px;
}

/* Vertical "heartbeat", a single neon bar traversing the viewport every ~8s */
@keyframes heartbeat-scan {
  0%   { transform: translateY(-10%); opacity: 0; }
  4%   { opacity: 1; }
  10%  { opacity: 1; }
  16%  { opacity: 0; }
  100% { transform: translateY(110vh); opacity: 0; }
}
.heartbeat {
  position: fixed; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,255,136,0.7), transparent);
  pointer-events: none;
  z-index: 1;
  animation: heartbeat-scan 8s linear infinite;
}

.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; }
.material-symbols-outlined.filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ─────────────────────────────────────────────── BUTTONS */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  background: #00ff88;
  color: #00210c;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 12px 20px;
  border: 0;
  cursor: pointer;
  transition: background-color 200ms ease, transform 120ms ease;
}
.btn-primary:hover { background: #60ff99; transform: translateY(-1px); }
.btn-primary:disabled { background: #2d372e; color: #849585; cursor: not-allowed; transform: none; }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  background: transparent;
  color: #00ff88;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 11px 19px;
  border: 1px solid #00ff88;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}
.btn-ghost:hover { background: rgba(0,255,136,0.10); }

.btn-soft {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  background: #13141d;
  color: #dae6d8;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 11px 19px;
  border: 1px solid rgba(132,149,133,0.30);
  cursor: pointer;
  transition: background-color 200ms ease;
}
.btn-soft:hover { background: #18221a; }

.btn-synth {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  background: transparent;
  color: #ff2db8;
  border: 1px solid #ff2db8;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 11px 19px;
  cursor: pointer;
  transition: background-color 200ms ease;
}
.btn-synth:hover { background: rgba(255,45,184,0.10); }

/* ─────────────────────────────────────────────── CARDS */
.card {
  background: #13141d;
  border: 1px solid #1a1c28;
  padding: 24px;
  transition: border-color 200ms ease;
}
.card:hover { border-color: rgba(0,255,136,0.50); }
.card-elev {
  background: #1a1c28;
  border: 1px solid rgba(0,255,136,0.30);
  border-top-width: 2px;
  border-top-color: #00ff88;
  padding: 24px;
}
.card-glass {
  background: rgba(19,20,29,0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(132,149,133,0.20);
  padding: 24px;
}
.card-plain {
  background: #18221a;
  border: 1px solid rgba(132,149,133,0.20);
  padding: 24px;
}

/* ─────────────────────────────────────────────── TERMINAL MOCK */
.term {
  background: #06070b;
  border: 1px solid #1a1c28;
  box-shadow: 0 0 20px rgba(0,255,136,0.10);
  position: relative;
  overflow: hidden;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.term .term-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px;
  background: #0d0e15;
  border-bottom: 1px solid #1a1c28;
  font-size: 11px;
}
.term .term-body { padding: 24px; color: #b9cbb9; display: flex; flex-direction: column; gap: 6px; }
.term .term-prompt { color: #00ff88; }
.term .term-out   { color: #60ff99; }

/* ─────────────────────────────────────────────── PILLS / TAGS */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border: 1px solid rgba(132,149,133,0.30);
  background: #141e16;
  color: #b9cbb9;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.tag-live  { border-color: rgba(0,255,136,0.50); color: #00ff88; }
.tag-data  { border-color: rgba(0,210,253,0.50); color: #00d2fd; }
.tag-synth { border-color: rgba(255,210,230,0.40); color: #ffd2e6; }
.tag-gold  { border-color: rgba(255,209,102,0.50); color: #ffd166; }

.label-caps {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #b9cbb9;
}

.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #00ff88;
}

/* ─────────────────────────────────────────────── STATS */
.stat-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: #dae6d8;
}
.stat-big {
  font-family: 'JetBrains Mono', monospace;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────── DOT */
.dot { width: 6px; height: 6px; border-radius: 99px; display: inline-block; }
.dot-live { background: #00ff88; animation: dot-pulse 2s ease-in-out infinite; }
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,255,136,0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(0,255,136,0); }
}

/* ─────────────────────────────────────────────── NAV */
.nav-link {
  position: relative;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  color: #b9cbb9;
  padding-bottom: 4px;
  transition: color 150ms ease;
}
.nav-link:hover { color: #60ff99; }
.nav-link.active { color: #60ff99; font-weight: 700; }
.nav-link.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: #60ff99;
}

/* ─────────────────────────────────────────────── FADE-UP */
@keyframes fade-up {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}
.animate-fade-up   { animation: fade-up 600ms cubic-bezier(0.2,0.8,0.2,1) both; }
.animate-fade-up.delay-1 { animation-delay: 80ms;  }
.animate-fade-up.delay-2 { animation-delay: 160ms; }
.animate-fade-up.delay-3 { animation-delay: 240ms; }
.animate-fade-up.delay-4 { animation-delay: 320ms; }
.animate-fade-up.delay-5 { animation-delay: 400ms; }

/* ─────────────────────────────────────────────── CURSOR */
@keyframes type-cursor {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}
.cursor-blink {
  display: inline-block;
  color: #00ff88;
  animation: type-cursor 1s infinite;
}

/* ─────────────────────────────────────────────── GRADIENT TEXT */
.text-grad {
  background: linear-gradient(90deg, #00ff88 0%, #00d2fd 50%, #ffd2e6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.text-grad-2 {
  background: linear-gradient(90deg, #60ff99 0%, #3cd7ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ─────────────────────────────────────────────── BARS */
.bar-track {
  height: 4px;
  background: #18221a;
  border: 1px solid rgba(132,149,133,0.15);
}
.bar-fill { height: 100%; background: #00ff88; }
.bar-fill-cyan { background: #00d2fd; }
.bar-fill-pink { background: #ffd2e6; }
.bar-fill-gold { background: #ffd166; }

/* ─────────────────────────────────────────────── SCROLLBAR */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0c160e; }
::-webkit-scrollbar-thumb { background: #18221a; }
::-webkit-scrollbar-thumb:hover { background: #2d372e; }
::selection { background: #00ff88; color: #00210c; }

/* ─────────────────────────────────────────────── INPUTS (for stake amounts) */
.input-stake {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #1a1c28;
  color: #dae6d8;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  padding: 8px 0;
  width: 100%;
  outline: none;
  font-variant-numeric: tabular-nums;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.input-stake:focus {
  border-bottom-color: #00ff88;
  box-shadow: 0 1px 0 0 rgba(0,255,136,0.30);
}

/* ─────────────────────────────────────────────── TABLE */
.tbl { width: 100%; border-collapse: collapse; }
.tbl thead th {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid #1a1c28;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #b9cbb9;
}
.tbl tbody td {
  padding: 16px;
  border-bottom: 1px solid #1a1c28;
  font-size: 14px;
  vertical-align: middle;
}
.tbl tbody tr:hover td { background: rgba(0,255,136,0.03); }
.tbl tbody tr:last-child td { border-bottom: 0; }

/* ─────────────────────────────────────────────── TOAST */
.toast {
  position: fixed; bottom: 24px; right: 24px;
  background: #18221a;
  border: 1px solid rgba(0,255,136,0.50);
  border-left: 4px solid #00ff88;
  color: #dae6d8;
  padding: 14px 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  z-index: 100;
  max-width: 360px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.err  { border-color: rgba(255,180,171,0.50); border-left-color: #ffb4ab; }