/* ═══════════════════════════════════════════════════════
   DEMO ENVIRONMENT
═══════════════════════════════════════════════════════ */
.demo-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: #08101C;
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.demo-overlay.active { opacity: 1; pointer-events: auto; }

/* Header */
.demo-header {
  height: 52px; flex-shrink: 0;
  display: flex; align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: #0A0F1E; padding: 0 0 0 16px;
}
.demo-back-btn {
  background: none; border: none; cursor: pointer;
  color: #475569; font-family: 'Inter', sans-serif; font-size: 13px;
  padding: 6px 16px 6px 4px; display: flex; align-items: center; gap: 5px;
  border-right: 1px solid rgba(255,255,255,0.07); margin-right: 4px;
  flex-shrink: 0; transition: color 0.2s; white-space: nowrap;
}
.demo-back-btn:hover { color: #94A3B8; }
.demo-tabs { display: flex; flex: 1; height: 52px; overflow-x: auto; }
.demo-tab {
  padding: 0 18px; height: 52px; white-space: nowrap;
  background: none; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -1px; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
  color: #64748B; transition: color 0.2s, border-color 0.2s;
}
.demo-tab:hover  { color: #94A3B8; }
.demo-tab.active { color: #fff; border-bottom-color: var(--accent); font-weight: 600; }
.demo-badge {
  font-size: 10px; color: #2D3748; font-family: var(--mono);
  padding: 0 16px; white-space: nowrap; flex-shrink: 0;
}

/* Body + views */
.demo-body { flex: 1; overflow: hidden; position: relative; }
.demo-view { position: absolute; inset: 0; display: none; flex-direction: column; overflow: hidden; }
.demo-view.active { display: flex; }