#app { min-height: 100vh; }

/* ---------- Sidebar (always navy) ---------- */
.app-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 50;
  width: var(--sidebar-width);
  display: flex; flex-direction: column;
  background: var(--nav-bg); color: var(--nav-text);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  padding: 24px 16px 16px;
  transition: width var(--ease), transform 0.22s ease;
}

.sb-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 20px; padding: 0 4px; }

.app-logo { display: flex; align-items: center; gap: 10px; white-space: nowrap; min-width: 0; }
.logo-img { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
.logo-text { font-size: 19px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.logo-text span { color: var(--cta); }

.sb-collapse-btn {
  width: 28px; height: 28px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px;
  color: var(--nav-text); font-size: 15px; transition: color var(--ease), background var(--ease), transform var(--ease);
}
.sb-collapse-btn:hover { color: #fff; background: var(--nav-hover); }

.sb-nav { flex: 1; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }

.sb-footer { position: relative; padding-top: 14px; margin-top: 10px; border-top: 1px solid var(--nav-line); }

/* ---------- Main content ---------- */
.app-main {
  margin-left: var(--sidebar-width);
  padding: 40px 48px 64px;
  min-height: 100vh;
  transition: margin-left var(--ease);
}
.page { max-width: 1280px; margin: 0 auto; }

/* Collapsed sidebar: icons only (desktop preference; the mobile drawer always shows labels) */
@media (min-width: 901px) {
  .sidebar-collapsed .app-sidebar { width: var(--sidebar-collapsed-width); padding-left: 12px; padding-right: 12px; }
  .sidebar-collapsed .app-main { margin-left: var(--sidebar-collapsed-width); }
  .sidebar-collapsed .sb-top { flex-direction: column; gap: 14px; padding: 0; }
  .sidebar-collapsed .sb-collapse-btn { transform: rotate(180deg); }
  .sidebar-collapsed .app-sidebar .logo-text,
  .sidebar-collapsed .app-sidebar .nav-text,
  .sidebar-collapsed .app-sidebar .nav-badge,
  .sidebar-collapsed .app-sidebar .nav-caret,
  .sidebar-collapsed .app-sidebar .nav-section-label,
  .sidebar-collapsed .app-sidebar .nav-category-list,
  .sidebar-collapsed .app-sidebar .sb-user-text,
  .sidebar-collapsed .app-sidebar .sb-user-caret { display: none !important; }
  .sidebar-collapsed .app-sidebar .search-box input { display: none; }
  .sidebar-collapsed .app-sidebar .search-box { display: flex; justify-content: center; }
  .sidebar-collapsed .app-sidebar .search-icon { position: static; transform: none; font-size: 19px; cursor: pointer; padding: 10px; border-radius: 10px; }
  .sidebar-collapsed .app-sidebar .search-icon:hover { background: var(--nav-hover); color: #fff; }
  .sidebar-collapsed .app-sidebar .nav-link,
  .sidebar-collapsed .app-sidebar .nav-category-header { justify-content: center; padding: 11px 0; }
  .sidebar-collapsed .app-sidebar .sb-user-card { justify-content: center; padding: 8px 0; }
  .sidebar-collapsed .theme-menu { left: 0; right: auto; width: 220px; }
}

/* ---------- Mobile bar (< 900px) ---------- */
.mobile-bar {
  display: none; position: sticky; top: 0; z-index: 40; height: var(--mobile-bar-height);
  align-items: center; gap: 12px; padding: 0 16px;
  background: var(--nav-bg); border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 900px) {
  .mobile-bar { display: flex; }
  .app-sidebar {
    width: 280px; transform: translateX(-100%);
    box-shadow: 20px 0 50px rgba(0, 0, 0, 0.35);
  }
  body.sidebar-open .app-sidebar { transform: translateX(0); }
  .sb-collapse-btn { display: none; }
  .app-main { margin-left: 0; padding: 28px 20px 48px; min-height: calc(100vh - var(--mobile-bar-height)); }
  body.sidebar-open::after {
    content: ''; position: fixed; inset: 0; background: rgba(6, 12, 25, 0.55); z-index: 45;
  }
}

/* ---------- Demo workspace ---------- */
.demo-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; margin-top: 24px; align-items: start; }
.demo-sim {
  background: var(--sim-bg); border: 1px solid var(--nav-border); border-radius: var(--radius-lg);
  min-height: 500px; height: 500px; position: relative; overflow: hidden;
  box-shadow: var(--shadow-card);
}
/* Used by demos that stack a visualization and a graph in the same sim area (PID
   controller, double pendulum, circuit oscillations) — the default height leaves each
   only ~200px, too cramped to read a multi-line chart clearly. */
.demo-sim.demo-sim-tall { height: 760px; min-height: 760px; }
.demo-sim canvas { width: 100%; height: 100%; display: block; }
.demo-controls-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 22px; position: sticky; top: 24px;
  max-height: calc(100vh - 48px); overflow-y: auto; box-shadow: var(--shadow-card);
}
.controls-toggle { display: none; }
.demo-stats {
  margin-top: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 20px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px 28px;
  box-shadow: var(--shadow-card);
}
.demo-explanation {
  margin-top: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 28px; box-shadow: var(--shadow-card);
}

@media (max-width: 1050px) {
  .demo-workspace { grid-template-columns: 1fr; }
  .demo-controls-panel { position: static; max-height: none; }
  .demo-sim { height: 400px; min-height: 400px; }
  .demo-sim.demo-sim-tall { height: 640px; min-height: 640px; }
}