/* same CSS as previous static version, shortened here for brevity */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #0f172a;
  color: #e5e7eb;
}

/* ... (due to length, you can replace this with the full CSS from earlier if needed) */
/* For this demo we keep minimal; in real use paste the full style.css from previous project. */

.layout { display: flex; min-height: 100vh; }
.sidebar { width: 260px; background: #020617; color: #e5e7eb; padding: 16px 14px; display:flex; flex-direction:column; }
.main { margin-left:260px; flex:1; display:flex; flex-direction:column; }
.topbar { position:sticky; top:0; display:flex; justify-content:space-between; padding:12px 20px; background:#020617; }
.content { padding:18px 20px 28px; }
.section { margin-bottom:36px; }
.grid { display:grid; gap:16px; }
.grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.card { background:#020617; border-radius:16px; padding:14px; border:1px solid #1f2937; }
.metric-card .metric-label { font-size:12px; color:#9ca3af; }
.metric-card .metric-value { margin-top:6px; font-size:20px; font-weight:600; }
.table { width:100%; border-collapse:collapse; font-size:12px; }
.table th, .table td { padding:7px 8px; border-bottom:1px solid #1f2937; white-space:nowrap; }
.text-positive { color:#4ade80; }
.text-negative { color:#fca5a5; }
.input { width:100%; padding:7px 9px; border-radius:9px; border:1px solid #4b5563; background:#020617; color:#e5e7eb; font-size:13px; }
.btn-primary { padding:7px 14px; border-radius:999px; border:none; background:#22c55e; color:#0f172a; font-size:13px; font-weight:600; cursor:pointer; }
.btn-secondary { padding:7px 14px; border-radius:999px; border:1px solid #4b5563; background:transparent; color:#e5e7eb; font-size:13px; cursor:pointer; }

@media (max-width: 768px) {
  .sidebar { position:fixed; inset:0 auto 0 0; transform:translateX(-100%); transition:transform .2s; z-index:40; }
  .sidebar.open { transform:translateX(0); }
  .main { margin-left:0; }
  .grid-4, .grid-2 { grid-template-columns:1fr; }
}