/* ── Variables ── */
:root {
  --bg:      #050a0f;
  --bg2:     #080f17;
  --surface: #0d1b2a;
  --surf2:   #112236;
  --neon:    #00e5ff;
  --neon2:   #00ff88;
  --neon3:   #ff3b6b;
  --gold:    #ffd700;
  --silver:  #c0c0c0;
  --bronze:  #cd7f32;
  --orange:  #f97316;
  --text:    #e0eaf5;
  --muted:   #6b8aaa;
  --border:  rgba(0,229,255,0.12);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Barlow Condensed', sans-serif;
  min-height: 100vh;
}

/* ── Layout ── */
.page {
  margin: 0 auto;
  padding: 2rem 2.5rem 4rem;
}

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

/* ── Typography ── */
.page-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--neon);
  margin-bottom: 0.4rem;
}

.page-subtitle {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: var(--muted);
  margin-top: 0.3rem;
}

.last-update {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: var(--muted);
  text-align: right;
}

/* ── Panel ── */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.4rem;
  background: var(--surf2);
  border-bottom: 1px solid var(--border);
}

.panel-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ── Badges ── */
.badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  min-width: 52px;
  text-align: center;
}

.badge-achat { background: rgba(0,255,136,0.12);   color: var(--neon2); border: 1px solid rgba(0,255,136,0.2); }
.badge-vente { background: rgba(255,59,107,0.12);  color: var(--neon3); border: 1px solid rgba(255,59,107,0.2); }
.badge-rien  { background: rgba(107,138,170,0.12); color: var(--muted); border: 1px solid rgba(107,138,170,0.2); }

/* ── Colors ── */
.up      { color: var(--neon2); }
.down    { color: var(--neon3); }
.neutral { color: var(--muted); }

/* ── Messages ── */
.msg {
  padding: 0.7rem 1rem;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  margin-bottom: 1rem;
  display: none;
}
.msg.error   { background: rgba(255,59,107,0.1); border: 1px solid rgba(255,59,107,0.3); color: var(--neon3); display: block; }
.msg.success { background: rgba(0,255,136,0.1);  border: 1px solid rgba(0,255,136,0.3);  color: var(--neon2); display: block; }

/* ── Loading ── */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
}

.spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--neon);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ── Empty state ── */
.empty-state {
  padding: 3rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.8;
}

.empty-icon { font-size: 2.5rem; display: block; margin-bottom: 0.8rem; }

/* ── Animations ── */
@keyframes spin   { to { transform: rotate(360deg); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse  { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.anim { animation: fadeUp 0.4s ease both; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .page { padding: 1.5rem 1rem 3rem; }
}