/* ===========================
   APP LAYOUT
   =========================== */

#app {
  display: flex;
  min-height: 100vh;
}

/* ===========================
   SIDEBAR
   =========================== */

.sidebar {
  width: 240px;
  background: #050b16;
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.sidebar-logo {
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 24px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-item {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 10px 12px;
  border-radius: 999px;
  text-align: left;
  cursor: pointer;
}

.nav-item.active {
  background: var(--accent-soft);
  color: var(--text-main);
}

.sidebar-footer {
  margin-top: auto;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ===========================
   MAIN PANEL
   =========================== */

.main-panel {
  flex: 1;
  padding: 24px;
  background: var(--bg-panel);
  overflow-y: auto;
}

/* ===========================
   CARD
   =========================== */

.card {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

/* ===========================
   GRID (existing)
   =========================== */

.grid-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* ===========================
   NEW: TWO-COLUMN HISTORY LAYOUT
   =========================== */

.two-columns {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin