:root { --bg:#0e0e0f; --panel:#1b1b1f; --text:#e8e8ea; --muted:#b8b8bd; --accent:#e4b94a; }
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; background:#0b0b0c url('./assets/btj-bg.jpg') center/cover fixed no-repeat; color:var(--text); font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.wrap { max-width:1100px; margin:0 auto; padding:32px 16px 80px; }
h1 { text-align:center; margin:0 0 6px; letter-spacing:.5px; }
h1 .brand { color:var(--accent); font-weight:800; }
.sub { text-align:center; margin-bottom:24px; color:var(--muted); font-size:14px; }
.grid { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.card { background:rgba(27,27,31,.9); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:16px; backdrop-filter: blur(2px); }
.card h3 { margin:0 0 8px; font-size:16px; }
.stat { font-size:18px; font-weight:700; }
.charts { display:grid; grid-template-columns:2fr 1fr; gap:16px; margin-top:16px; }
.bottom { margin-top:16px; }
.actions { display:flex; gap:8px; align-items:center; justify-content:flex-end; margin-bottom:8px; }
select, button { background:#24242a; color:var(--text); border:1px solid #3a3a42; padding:8px 10px; border-radius:8px; }
.tabbar { display:flex; gap:6px; margin-bottom:8px; }
.tabbar .tab { padding:6px 10px; border:1px solid #3a3a42; border-radius:999px; cursor:pointer; font-size:12px; }
.tabbar .tab.active { background:#34343c; }
.tabcontent { display:none; }
.tabcontent.active { display:block; }
.table { width:100%; border-collapse:collapse; font-size:13px; }
.table th, .table td { border-bottom:1px solid #2c2c33; padding:8px 6px; text-align:left; }
.footer { text-align:center; font-size:12px; color:var(--muted); margin-top:18px; }
.small { color:var(--muted); font-size:12px; }

/* Loading indicator */
.loading { 
  text-align:center; 
  padding:20px; 
  color:var(--muted); 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  gap:10px; 
}
.loading-spinner {
  width:20px; 
  height:20px; 
  border:2px solid #3a3a42; 
  border-top:2px solid var(--accent); 
  border-radius:50%; 
  animation:spin 1s linear infinite;
}
@keyframes spin {
  0% { transform:rotate(0deg); }
  100% { transform:rotate(360deg); }
}

/* Chart fallback */
.chart-fallback {
  height:130px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-size:14px;
  background:rgba(255,255,255,0.02);
  border-radius:8px;
  margin-top:8px;
}