@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  --bg: #0A0E17;
  --panel: #111827;
  --border: #1E293B;
  --cyan: #06B6D4;
  --green: #10B981;
  --amber: #F59E0B;
  --text: #F8FAFC;
  --sub: #94A3B8;
  --mono: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); padding: 24px; }
.header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 16px; margin-bottom: 24px; }
.badge { font-family: var(--mono); font-size: 0.8rem; background: rgba(16, 185, 129, 0.15); color: var(--green); padding: 4px 10px; border-radius: 4px; }

.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-box { background: var(--panel); border: 1px solid var(--border); padding: 20px; border-radius: 10px; }
.stat-box h4 { font-size: 0.8rem; color: var(--sub); font-family: var(--mono); margin-bottom: 8px; }
.stat-box .val { font-size: 1.6rem; font-weight: 700; font-family: var(--mono); color: var(--cyan); }

.chart-panel { background: var(--panel); border: 1px solid var(--border); padding: 20px; border-radius: 10px; margin-bottom: 24px; }
.log-panel { background: var(--panel); border: 1px solid var(--border); padding: 20px; border-radius: 10px; font-family: var(--mono); font-size: 0.82rem; height: 220px; overflow-y: auto; }
.log-entry { padding: 4px 0; border-bottom: 1px solid rgba(30, 41, 59, 0.4); }
.log-ts { color: var(--sub); margin-right: 8px; }